@cccsaurora/howler-ui 2.19.0-dev.999 → 2.19.0

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

@@ -0,0 +1,105 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Skeleton, Stack, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import { buildPathFromID } from '../../utils';
+import CaseFolderContextMenu from './CaseFolderContextMenu';
+import FolderEntry from './FolderEntry';
+import { buildTree } from './utils';
+const CaseFolder = ({ case: _case, folder, name, step = -1, parentCaseNames = [], collapseKey, onItemUpdated }) => {
+    const theme = useTheme();
+    const { dispatchApi } = useMyApi();
+    const params = useParams();
+    const [open, setOpen] = useState(!name || !collapseKey);
+    const [caseStates, setCaseStates] = useState({});
+    // Collapse this folder (and clear nested case expansions) when the parent
+    // signals collapse-all. Only named folders (not the invisible root) respond.
+    useEffect(() => {
+        if (!collapseKey) {
+            return;
+        }
+        setCaseStates(_states => Object.fromEntries(Object.entries(_states).map(([id, entry]) => [id, { ...entry, open: false }])));
+        if (name) {
+            setOpen(false);
+        }
+    }, [collapseKey, name]);
+    const records = useContextSelector(RecordContext, ctx => ctx.records);
+    const tree = useMemo(() => folder || buildTree(_case?.items), [folder, _case?.items]);
+    const rootCaseId = params.id;
+    // Returns the MUI colour token for the item's escalation, or undefined if none.
+    const getEscalationColor = (itemType, leaf) => {
+        if (itemType === 'hit' && leaf.value) {
+            const color = ESCALATION_COLORS[records[leaf.value]?.howler?.escalation];
+            if (color)
+                return color;
+        }
+        if (itemType === 'case' && leaf.value) {
+            const color = ESCALATION_COLORS[caseStates[leaf.value]?.data?.escalation];
+            if (color)
+                return color;
+        }
+        return null;
+    };
+    const toggleCase = useCallback((item) => {
+        const prev = caseStates[item.value] ?? { open: false, loading: false, data: null };
+        const shouldOpen = !prev.open;
+        const shouldFetch = shouldOpen && !!item.value && !prev.data && !prev.loading;
+        setCaseStates(current => ({ ...current, [item.value]: { ...prev, open: shouldOpen, loading: shouldFetch } }));
+        if (!shouldFetch)
+            return;
+        void dispatchApi(api.v2.case.get(item.value), { throwError: false })
+            .then(caseResponse => {
+            if (!caseResponse)
+                return;
+            setCaseStates(current => ({ ...current, [item.value]: { ...current[item.value], data: caseResponse } }));
+        })
+            .finally(() => {
+            setCaseStates(current => ({ ...current, [item.value]: { ...current[item.value], loading: false } }));
+        });
+    }, [caseStates, dispatchApi]);
+    return (_jsxs(Stack, { sx: { overflow: 'visible' }, children: [name && (_jsx(CaseFolderContextMenu, { case: _case, item: folder.item, onUpdate: onItemUpdated, children: _jsx(Box, { sx: {
+                        transition: theme.transitions.create('background', { duration: 100 }),
+                        background: 'transparent',
+                        '&:hover': { background: theme.palette.grey[800] }
+                    }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, indent: step * 1.5, label: name, chevronOpen: open, onClick: () => setOpen(_open => !_open), entry: folder.item }) }) })), open && (_jsxs(_Fragment, { children: [tree.leaves
+                        ?.filter(leaf => leaf.type?.toLowerCase() === 'case')
+                        .map(leaf => {
+                        const itemType = leaf.type?.toLowerCase();
+                        const nodeState = leaf.value ? caseStates[leaf.value] : null;
+                        const isCaseOpen = !!nodeState?.open;
+                        const isCaseLoading = !!nodeState?.loading;
+                        const nestedCase = nodeState?.data ?? null;
+                        const fullItemPath = [...parentCaseNames, leaf.name].filter(Boolean).join('/');
+                        const itemTo = `/cases/${rootCaseId}${fullItemPath ? `/${fullItemPath}` : ''}`;
+                        const escalationColor = getEscalationColor(itemType, leaf);
+                        const iconColor = escalationColor ?? 'inherit';
+                        const leafColor = escalationColor ? `${escalationColor}.light` : 'text.secondary';
+                        return (_jsx(CaseFolderContextMenu, { case: _case, item: leaf, onUpdate: onItemUpdated, children: _jsxs(Stack, { children: [_jsx(Box, { sx: {
+                                            transition: theme.transitions.create('background', { duration: 100 }),
+                                            background: 'transparent',
+                                            '&:hover': { background: theme.palette.grey[800] }
+                                        }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, indent: step * 1.5 + 1, label: leaf.name ?? leaf.value ?? '', iconColor: iconColor, labelColor: leafColor, chevronOpen: isCaseOpen, to: itemTo, onClick: () => toggleCase(leaf), entry: leaf }) }), isCaseOpen && isCaseLoading && (_jsx(Stack, { pl: step * 1.5 + 4, py: 0.25, children: _jsx(Skeleton, { width: 140, height: 16 }) })), isCaseOpen && nestedCase && (_jsx(CaseFolder, { case: nestedCase, step: step + 1, parentCaseNames: [...parentCaseNames, leaf.name].filter(Boolean), onItemUpdated: onItemUpdated, collapseKey: collapseKey }))] }) }, `${_case?.case_id}-${leaf.id}-${leaf.value}`));
+                    }), Object.entries(tree.folders ?? {}).map(([folderName, subfolder]) => {
+                        return (_jsx(CaseFolder, { name: folderName, case: _case, folder: subfolder, step: step + 1, parentCaseNames: parentCaseNames, onItemUpdated: onItemUpdated, collapseKey: collapseKey }, subfolder.item.id));
+                    }), tree.leaves
+                        ?.filter(leaf => leaf.type?.toLowerCase() !== 'case')
+                        .map(leaf => {
+                        const itemType = leaf.type?.toLowerCase();
+                        const fullItemPath = [...parentCaseNames, buildPathFromID(_case, leaf.id)].filter(Boolean).join('/');
+                        const itemTo = itemType !== 'reference' ? `/cases/${rootCaseId}${fullItemPath ? `/${fullItemPath}` : ''}` : leaf.value;
+                        const escalationColor = getEscalationColor(itemType, leaf);
+                        const iconColor = escalationColor ?? 'inherit';
+                        const leafColor = escalationColor ? `${escalationColor}.light` : 'text.secondary';
+                        return (_jsx(CaseFolderContextMenu, { case: _case, item: leaf, onUpdate: onItemUpdated, children: _jsx(Box, { sx: {
+                                    transition: theme.transitions.create('background', { duration: 100 }),
+                                    background: 'transparent',
+                                    '&:hover': { background: theme.palette.grey[800] }
+                                }, children: _jsx(FolderEntry, { caseId: _case.case_id === rootCaseId ? rootCaseId : null, indent: step * 1.5 + 1, label: leaf.name ?? leaf.value ?? '', iconColor: iconColor, labelColor: leafColor, to: itemTo, entry: leaf }) }) }, `${_case?.case_id}-${leaf.id}-${leaf.value}`));
+                    })] }))] }));
+};
+export default CaseFolder;

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

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

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

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import { act, createContext } from 'react';
+import { setupContextSelectorMock, setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+setupContextSelectorMock();
+setupReactRouterMock();
+vi.mock('@dnd-kit/core', () => ({
+    useDraggable: () => ({ attributes: {}, listeners: {}, setNodeRef: vi.fn(), transform: null, isDragging: false }),
+    useDroppable: () => ({ setNodeRef: vi.fn(), isOver: false })
+}));
+vi.mock('@dnd-kit/utilities', () => ({
+    CSS: { Transform: { toString: () => '' } }
+}));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockGetCase = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                get: (...args) => mockGetCase(...args),
+                items: { del: vi.fn(), patch: vi.fn() }
+            }
+        }
+    }
+}));
+vi.mock('./CaseFolderContextMenu', () => ({
+    default: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('components/app/providers/ModalProvider', async () => ({
+    ModalContext: createContext({ showModal: vi.fn(), close: vi.fn(), setContent: vi.fn() })
+}));
+const mockRecords = vi.hoisted(() => ({ current: {} }));
+vi.mock('components/app/providers/RecordProvider', async () => ({
+    RecordContext: createContext({ records: mockRecords.current })
+}));
+import { MemoryRouter, useParams } from 'react-router-dom';
+import CaseFolder from './CaseFolder';
+const makeCase = (id, items = []) => ({
+    __index: 'case',
+    case_id: id,
+    title: `Case ${id}`,
+    items,
+    tasks: []
+});
+const hitItem = (name, value = name, id = `id-${value}`) => ({ id, type: 'hit', value, name });
+const caseItem = (name, value, id = `id-${value}`) => ({ id, type: 'case', value, name });
+const refItem = (name, value, id = `id-${value}`) => ({ id, type: 'reference', value, name });
+const renderFolder = (props, routeId) => {
+    vi.mocked(useParams).mockReturnValue({ id: routeId ?? props.case.case_id });
+    return render(_jsx(MemoryRouter, { children: _jsx(CaseFolder, { step: 0, ...props }) }));
+};
+beforeEach(() => {
+    mockDispatchApi.mockReset();
+    mockGetCase.mockReset();
+    mockRecords.current = {};
+});
+describe('CaseFolder', () => {
+    it('builds non-reference leaf URLs from root case id and item path', () => {
+        renderFolder({ case: makeCase('case-1', [hitItem('my-hit', 'hit-id', 'item-1')]) });
+        const link = screen.getByText('my-hit').closest('a');
+        expect(link).toHaveAttribute('href', '/cases/case-1/my-hit');
+    });
+    it('uses item value directly for reference href', () => {
+        renderFolder({ case: makeCase('case-1', [refItem('ext', 'https://example.com')]) });
+        const link = screen.getByText('ext').closest('a');
+        expect(link).toHaveAttribute('href', 'https://example.com');
+    });
+    it('prepends parentCaseNames to non-reference item paths', () => {
+        renderFolder({
+            case: makeCase('nested', [hitItem('page', 'page-val', 'id-page')]),
+            parentCaseNames: ['Child Case']
+        }, 'root-case');
+        const link = screen.getByText('page').closest('a');
+        expect(link?.getAttribute('href')).toBe('/cases/root-case/Child Case/page');
+    });
+    it('fetches nested case when case leaf is clicked and renders nested leaves', async () => {
+        const nestedCase = makeCase('child-case-id', [hitItem('nested-item', 'v1', 'nested-id')]);
+        mockGetCase.mockReturnValue(Promise.resolve(nestedCase));
+        mockDispatchApi.mockImplementation((p) => p);
+        renderFolder({ case: makeCase('root', [caseItem('child', 'child-case-id', 'child-id')]) });
+        act(() => {
+            screen.getByText('child').click();
+        });
+        await waitFor(() => {
+            expect(mockGetCase).toHaveBeenCalledWith('child-case-id');
+            expect(screen.getByText('nested-item')).toBeInTheDocument();
+        });
+    });
+    it('uses route case id as root id for nested links', () => {
+        renderFolder({ case: makeCase('nested-case', [hitItem('item', 'v', 'id-v')]) }, 'root-case');
+        const link = screen.getByText('item').closest('a');
+        expect(link).toHaveAttribute('href', '/cases/root-case/item');
+    });
+});

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

@@ -0,0 +1,32 @@
+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>
+ * - event: /events/<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. */
+    item: Item;
+    /** Called after item(s) have been updated (renamed, 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,99 @@
+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 subfolder of Object.values(tree.folders ?? {})) {
+        result.push(...collectAllLeaves(subfolder));
+    }
+    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>
+ * - event: /events/<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 === 'event') {
+        return leaf.value ? `/events/${leaf.value}` : null;
+    }
+    if (type === 'case') {
+        return leaf.value ? `/cases/${leaf.value}` : null;
+    }
+    if (type === 'markdown') {
+        return 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: _case, item, onUpdate, children }) => {
+    const { dispatchApi } = useMyApi();
+    const { t } = useTranslation();
+    const { showModal } = useContext(ModalContext);
+    const items = useMemo(() => {
+        const entries = [];
+        const openUrl = getOpenUrl(item);
+        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')
+            });
+        }
+        if (entries.length > 0) {
+            entries.push({ kind: 'divider', id: 'divider-remove' });
+        }
+        const isFolder = item.type === 'folder';
+        entries.push({
+            kind: 'item',
+            id: 'rename-item',
+            label: isFolder ? t('page.cases.sidebar.folder.rename') : t('page.cases.sidebar.item.rename'),
+            icon: _jsx(DriveFileRenameOutline, { fontSize: "small" }),
+            onClick: () => showModal(_jsx(RenameItemModal, { _case: _case, item: item, onRenamed: onUpdate }), { height: null })
+        });
+        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;
+                }
+                void dispatchApi(api.v2.case.items.del(_case.case_id, [item.id], isFolder), { throwError: false }).then(updatedCase => {
+                    if (updatedCase) {
+                        onUpdate?.(updatedCase);
+                    }
+                });
+            }
+        });
+        return entries;
+    }, [_case, item, 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 {};

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

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { act } from 'react';
+import { createMockCase } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+vi.mock('components/elements/ContextMenu', () => ({
+    default: ({ items, children }) => (_jsxs("div", { children: [children, items.map((item) => {
+                if (item.kind === 'item') {
+                    return (_jsx("button", { id: item.id, onClick: item.onClick, children: item.label }, item.id));
+                }
+                if (item.kind === 'divider') {
+                    return _jsx("hr", {}, item.id);
+                }
+                return null;
+            })] }))
+}));
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+const mockDel = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        v2: {
+            case: {
+                items: {
+                    del: (...args) => mockDel(...args)
+                }
+            }
+        }
+    }
+}));
+const mockShowModal = vi.hoisted(() => vi.fn());
+vi.mock('components/app/providers/ModalProvider', async () => {
+    const { createContext } = await import('react');
+    return {
+        ModalContext: createContext({ showModal: mockShowModal, close: vi.fn(), setContent: vi.fn() })
+    };
+});
+vi.mock('components/routes/cases/modals/RenameItemModal', () => ({
+    default: () => _jsx("div", { id: "rename-item-modal" })
+}));
+import CaseFolderContextMenu, { getOpenUrl } from './CaseFolderContextMenu';
+const mockCase = createMockCase({ case_id: 'case-1' });
+const hitLeaf = { id: 'id-hit', type: 'hit', value: 'hit-123', name: 'hit-item' };
+const folderItem = { id: 'folder-id', type: 'folder', value: 'Folder', name: 'Folder' };
+const renderMenu = (props) => render(_jsx(CaseFolderContextMenu, { case: mockCase, item: hitLeaf, ...props, children: _jsx("div", { id: "child", children: "child" }) }));
+beforeEach(() => {
+    mockDel.mockClear();
+    mockDispatchApi.mockClear();
+    mockShowModal.mockClear();
+    mockDispatchApi.mockImplementation((p) => p);
+    mockDel.mockResolvedValue(mockCase);
+    vi.spyOn(window, 'open').mockReturnValue(null);
+});
+describe('getOpenUrl', () => {
+    it('resolves known leaf links and returns null for folders', () => {
+        expect(getOpenUrl({ type: 'reference', value: 'https://example.com' })).toBe('https://example.com');
+        expect(getOpenUrl({ type: 'hit', value: 'h1' })).toBe('/hits/h1');
+        expect(getOpenUrl({ type: 'event', value: 'e1' })).toBe('/events/e1');
+        expect(getOpenUrl({ type: 'case', value: 'c1' })).toBe('/cases/c1');
+        expect(getOpenUrl({ type: 'folder', value: 'Folder' })).toBeNull();
+    });
+});
+describe('CaseFolderContextMenu', () => {
+    it('shows open, rename, and remove for leaf items with open URL', () => {
+        renderMenu({ item: hitLeaf });
+        expect(screen.getByText('page.cases.sidebar.item.open')).toBeInTheDocument();
+        expect(screen.getByText('page.cases.sidebar.item.rename')).toBeInTheDocument();
+        expect(screen.getByText('page.cases.sidebar.item.remove')).toBeInTheDocument();
+        expect(document.querySelector('hr')).toBeInTheDocument();
+    });
+    it('shows rename/remove folder actions and no open action for folders', () => {
+        renderMenu({ item: folderItem });
+        expect(screen.queryByText('page.cases.sidebar.item.open')).not.toBeInTheDocument();
+        expect(screen.getByText('page.cases.sidebar.folder.rename')).toBeInTheDocument();
+        expect(screen.getByText('page.cases.sidebar.folder.remove')).toBeInTheDocument();
+    });
+    it('opens resolved URL in new tab', () => {
+        renderMenu({ item: hitLeaf });
+        act(() => {
+            fireEvent.click(screen.getByText('page.cases.sidebar.item.open'));
+        });
+        expect(window.open).toHaveBeenCalledWith('/hits/hit-123', '_blank', 'noopener noreferrer');
+    });
+    it('calls showModal for rename action', () => {
+        renderMenu({ item: hitLeaf });
+        act(() => {
+            fireEvent.click(screen.getByText('page.cases.sidebar.item.rename'));
+        });
+        expect(mockShowModal).toHaveBeenCalledTimes(1);
+    });
+    it('calls delete API with force=true for folders', async () => {
+        renderMenu({ item: folderItem });
+        act(() => {
+            fireEvent.click(screen.getByText('page.cases.sidebar.folder.remove'));
+        });
+        await waitFor(() => {
+            expect(mockDel).toHaveBeenCalledWith('case-1', ['folder-id'], true);
+        });
+    });
+    it('passes undefined item id through to delete API when id is missing', () => {
+        renderMenu({ item: { type: 'hit', value: 'h1', name: 'hit' } });
+        act(() => {
+            fireEvent.click(screen.getByText('page.cases.sidebar.item.remove'));
+        });
+        expect(mockDel).toHaveBeenCalledWith('case-1', [undefined], false);
+    });
+    it('passes updated case to onUpdate after delete', async () => {
+        const onUpdate = vi.fn();
+        renderMenu({ item: hitLeaf, onUpdate });
+        act(() => {
+            fireEvent.click(screen.getByText('page.cases.sidebar.item.remove'));
+        });
+        await waitFor(() => expect(onUpdate).toHaveBeenCalledWith(mockCase));
+    });
+});

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

@@ -0,0 +1,25 @@
+import type { SvgIconProps } from '@mui/material';
+import type { Item } from '@cccsaurora/howler-ui/models/entities/generated/Item';
+import type { FC } from 'react';
+interface FolderEntryProps {
+    /** The corresponding case ID for this entry */
+    caseId?: string | null;
+    /** MUI `pl` value for indentation */
+    indent: number;
+    /** Text displayed as the entry label */
+    label: string;
+    /** MUI icon color token applied to the entry icon (default: 'inherit') */
+    iconColor?: SvgIconProps['color'];
+    /** MUI color token for the label Typography (default: 'text.secondary') */
+    labelColor?: string;
+    /** Whether the chevron is rotated 90° (expanded state) */
+    chevronOpen?: boolean;
+    /** When provided the entry renders as a react-router Link */
+    to?: string;
+    /** Callback fired when the entry is clicked */
+    onClick?: () => void;
+    /** The item entity associated with this entry */
+    entry?: Item;
+}
+declare const FolderEntry: FC<FolderEntryProps>;
+export default FolderEntry;

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { BookRounded, CheckCircle, ChevronRight, Description, Folder, Lightbulb, Link as LinkIcon, TableChart, Visibility } from '@mui/icons-material';
+import { alpha, Box, Stack, Typography, useTheme } from '@mui/material';
+import { Link, useLocation } from 'react-router-dom';
+// Static map: item type → MUI icon component (avoids re-creating closures on each render)
+const ICON_FOR_TYPE = {
+    folder: Folder,
+    case: BookRounded,
+    event: Visibility,
+    hit: CheckCircle,
+    table: TableChart,
+    lead: Lightbulb,
+    reference: LinkIcon,
+    markdown: Description
+};
+const FolderEntry = ({ caseId, indent, label, iconColor = 'disabled', labelColor = 'text.secondary', chevronOpen = false, to, onClick, entry }) => {
+    const location = useLocation();
+    const theme = useTheme();
+    const isCase = entry?.type === 'case';
+    const isFolder = entry?.type === 'folder';
+    const entryId = entry?.id;
+    const dndId = `${caseId ?? ''}:${entry?.type}:${entryId}`;
+    const { attributes, listeners, setNodeRef: setDraggableNodeRef, transform, isDragging } = useDraggable({
+        id: dndId,
+        data: {
+            type: entry?.type,
+            label,
+            entry,
+            caseId
+        },
+        disabled: !caseId
+    });
+    const { setNodeRef: setDroppableNodeRef, isOver } = useDroppable({
+        id: dndId,
+        disabled: !isFolder || isDragging || !caseId,
+        data: {
+            caseId,
+            folderId: entry?.id ?? null
+        }
+    });
+    const isLink = to != null && !isDragging;
+    const active = decodeURIComponent(location.pathname) === to;
+    const Icon = ICON_FOR_TYPE[entry?.type] ?? Folder;
+    return (_jsxs(Stack, { ref: el => {
+            setDroppableNodeRef(el);
+            setDraggableNodeRef(el);
+        }, direction: "row", pl: indent, style: { transform: CSS.Transform.toString(transform), opacity: isDragging ? 0 : undefined }, sx: [
+            {
+                cursor: 'pointer',
+                overflow: 'visible',
+                color: `${theme.palette.text.secondary} !important`,
+                textDecoration: 'none',
+                background: 'transparent',
+                position: 'relative',
+                ...(isLink && { borderRight: '3px solid transparent' })
+            },
+            isLink &&
+                active && {
+                background: alpha(theme.palette.grey[600], 0.15),
+                borderRightColor: theme.palette.primary.main
+            }
+        ], onClick: onClick, ...attributes, ...listeners, ...(isLink && {
+            component: Link,
+            to,
+            target: entry?.type === 'reference' ? '_blank' : undefined,
+            rel: entry?.type === 'reference' ? 'noopener noreferrer' : undefined
+        }), children: [_jsx(Box, { sx: [
+                    {
+                        position: 'absolute',
+                        top: 0,
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        border: '2px dashed transparent',
+                        borderRadius: '5px',
+                        transition: theme.transitions.create('border-color')
+                    },
+                    isOver && caseId && { borderColor: theme.palette.primary.main }
+                ] }), _jsx(ChevronRight, { fontSize: "small", color: "disabled", sx: [
+                    !(isCase || isFolder) && { opacity: 0 },
+                    {
+                        transition: theme.transitions.create('transform', { duration: 100 }),
+                        transform: chevronOpen ? 'rotate(90deg)' : 'rotate(0deg)'
+                    }
+                ] }), _jsx(Icon, { fontSize: "small", color: iconColor }), _jsx(Typography, { variant: "caption", color: labelColor, sx: { userSelect: 'none', pl: 0.5, textWrap: 'nowrap' }, children: label })] }));
+};
+export default FolderEntry;

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

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

package/components/routes/cases/detail/sidebar/FolderEntry.test.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children })),
+        useLocation: vi.fn(() => ({ pathname: '/', search: '' }))
+    };
+});
+const mockDraggable = vi.hoisted(() => ({
+    isDragging: false,
+    transform: null
+}));
+vi.mock('@dnd-kit/core', () => ({
+    useDraggable: vi.fn(() => ({
+        attributes: {},
+        listeners: {},
+        setNodeRef: vi.fn(),
+        transform: mockDraggable.transform,
+        isDragging: mockDraggable.isDragging,
+        active: null
+    })),
+    useDroppable: vi.fn(() => ({
+        setNodeRef: vi.fn(),
+        isOver: false
+    }))
+}));
+vi.mock('@dnd-kit/utilities', () => ({
+    CSS: { Transform: { toString: (t) => (t ? `translate3d(${t.x}px,${t.y}px,0)` : '') } }
+}));
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import FolderEntry from './FolderEntry';
+const hitItem = (value, id = value) => ({ type: 'hit', value, id, name: value });
+const renderEntry = (props = {}) => {
+    const entry = props.entry ?? hitItem('my-hit', 'item-1');
+    return render(_jsx(MemoryRouter, { children: _jsx(FolderEntry, { caseId: "case-1", indent: 1, label: "my label", entry: entry, ...props }) }));
+};
+beforeEach(() => {
+    mockDraggable.isDragging = false;
+    mockDraggable.transform = null;
+    vi.mocked(useDroppable).mockReturnValue({ setNodeRef: vi.fn(), isOver: false });
+});
+describe('FolderEntry', () => {
+    it('opens reference links in a new tab', () => {
+        renderEntry({
+            entry: { id: 'ref-1', type: 'reference', value: 'https://example.com', name: 'ext' },
+            to: 'https://example.com',
+            label: 'ext'
+        });
+        const el = screen.getByText('ext').closest('a');
+        expect(el).toHaveAttribute('target', '_blank');
+        expect(el).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+    it('shows chevron for folder entries', () => {
+        const { container } = renderEntry({ entry: { id: 'f1', type: 'folder', value: 'Folder', name: 'Folder' } });
+        const chevron = container.querySelector('svg');
+        expect(chevron).toBeInTheDocument();
+    });
+    it('enables folder droppable when not dragging and caseId is set', () => {
+        renderEntry({ caseId: 'case-1', entry: { id: 'f1', type: 'folder', value: 'Folder', name: 'Folder' } });
+        expect(vi.mocked(useDroppable)).toHaveBeenCalledWith(expect.objectContaining({ id: 'case-1:folder:f1', disabled: false }));
+    });
+    it('passes namespaced id to useDroppable', () => {
+        renderEntry({ caseId: 'case-1', entry: { id: 'folder-id', type: 'folder', value: 'Folder', name: 'Folder' } });
+        expect(vi.mocked(useDroppable)).toHaveBeenCalledWith(expect.objectContaining({ id: 'case-1:folder:folder-id' }));
+    });
+    it('falls back to undefined id segment when entry has no id', async () => {
+        renderEntry({ caseId: null, label: 'my label', entry: { type: 'hit', value: 'v1', name: 'my label' } });
+        expect(vi.mocked(useDraggable)).toHaveBeenCalledWith(expect.objectContaining({ id: ':hit:undefined' }));
+    });
+    it('calls onClick when clicked', async () => {
+        const onClick = vi.fn();
+        renderEntry({ onClick });
+        await userEvent.click(screen.getByText('my label'));
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+});