@cccsaurora/howler-ui 2.18.0-dev.732 → 2.18.0-dev.736

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

@@ -0,0 +1,206 @@
+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 { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+setupContextSelectorMock();
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+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: '' }))
+    };
+});
+// Controllable draggable mock — lets individual tests flip isDragging and transform
+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)` : '') } }
+}));
+// ---------------------------------------------------------------------------
+// Imports after mocks
+// ---------------------------------------------------------------------------
+import { useDroppable } from '@dnd-kit/core';
+import FolderEntry from './FolderEntry';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const hitItem = (path, value = path) => ({ type: 'hit', value, path });
+const renderEntry = (props = {}) => render(_jsx(MemoryRouter, { children: _jsx(FolderEntry, { caseId: "case-1", path: "folder/item", indent: 1, label: "my label", itemType: "hit", ...props }) }));
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+beforeEach(() => {
+    mockDraggable.isDragging = false;
+    mockDraggable.transform = null;
+    vi.mocked(useDroppable).mockReturnValue({ setNodeRef: vi.fn(), isOver: false });
+});
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('FolderEntry', () => {
+    describe('rendering', () => {
+        it('renders the label text', () => {
+            renderEntry({ label: 'hello world' });
+            expect(screen.getByText('hello world')).toBeInTheDocument();
+        });
+        it('renders as a link when `to` is provided', () => {
+            renderEntry({ to: '/cases/case-1/folder/item' });
+            const el = screen.getByText('my label').closest('a');
+            expect(el).toHaveAttribute('href', '/cases/case-1/folder/item');
+        });
+        it('opens link in new tab for reference items', () => {
+            renderEntry({ itemType: 'reference', 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('does not render as a link when `to` is omitted', () => {
+            renderEntry({ to: undefined });
+            expect(screen.getByText('my label').closest('a')).toBeNull();
+        });
+        it('shows the chevron for folder items', () => {
+            // Chevron is visible (non-zero opacity) for folder and case types
+            const { container } = renderEntry({ itemType: 'folder' });
+            // ChevronRight is the first svg inside the row
+            const chevron = container.querySelector('svg');
+            expect(chevron).toBeInTheDocument();
+            expect(chevron).not.toHaveStyle('opacity: 0');
+        });
+        it('hides the chevron for non-folder, non-case items', () => {
+            const { container } = renderEntry({ itemType: 'hit' });
+            const chevron = container.querySelector('svg');
+            // Chevron rendered but with opacity 0 (applied via MUI sx / emotion class)
+            expect(chevron).toBeInTheDocument();
+            expect(chevron).toHaveStyle({ opacity: '0' });
+        });
+        it('rotates chevron when chevronOpen is true', () => {
+            const { container } = renderEntry({ itemType: 'folder', chevronOpen: true });
+            const chevron = container.querySelector('svg');
+            expect(chevron).toHaveStyle({ transform: 'rotate(90deg)' });
+        });
+        it('does not rotate chevron when chevronOpen is false', () => {
+            const { container } = renderEntry({ itemType: 'folder', chevronOpen: false });
+            const chevron = container.querySelector('svg');
+            expect(chevron).toHaveStyle({ transform: 'rotate(0deg)' });
+        });
+        it('falls back to the Folder icon for unknown itemTypes', () => {
+            // Should not throw; renders something
+            expect(() => renderEntry({ itemType: 'unknown-type' })).not.toThrow();
+            expect(screen.getByText('my label')).toBeInTheDocument();
+        });
+    });
+    describe('drag state', () => {
+        it('is fully visible when not dragging', () => {
+            const { container } = renderEntry();
+            const row = container.firstElementChild;
+            expect(row.style.opacity).toBe('');
+        });
+        it('becomes invisible (opacity 0) while dragging', () => {
+            mockDraggable.isDragging = true;
+            const { container } = renderEntry();
+            const row = container.firstElementChild;
+            expect(row.style.opacity).toBe('0');
+        });
+        it('does not render as a link while dragging even if `to` is set', () => {
+            mockDraggable.isDragging = true;
+            renderEntry({ to: '/cases/case-1/folder/item' });
+            // isLink = to != null && !isDragging → false, so no <a> wrapping
+            expect(screen.getByText('my label').closest('a')).toBeNull();
+        });
+        it('applies the CSS transform from useDraggable', () => {
+            mockDraggable.transform = { x: 42, y: 10, scaleX: 1, scaleY: 1 };
+            const { container } = renderEntry();
+            const row = container.firstElementChild;
+            expect(row.style.transform).toMatch(/translate3d\(42px,10px/);
+        });
+    });
+    describe('droppable behaviour', () => {
+        it('disables the droppable for non-folder items', () => {
+            renderEntry({ itemType: 'hit', caseId: 'case-1' });
+            expect(vi.mocked(useDroppable)).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }));
+        });
+        it('enables the droppable for folder items when caseId is set and not dragging', () => {
+            renderEntry({ itemType: 'folder', caseId: 'case-1' });
+            expect(vi.mocked(useDroppable)).toHaveBeenCalledWith(expect.objectContaining({ disabled: false }));
+        });
+        it('disables the droppable for folder items when caseId is null', () => {
+            renderEntry({ itemType: 'folder', caseId: null });
+            expect(vi.mocked(useDroppable)).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }));
+        });
+        it('shows the drop highlight border when isOver and caseId match', () => {
+            vi.mocked(useDroppable).mockReturnValue({ setNodeRef: vi.fn(), isOver: true });
+            const { container } = renderEntry({ caseId: 'case-1', itemType: 'folder' });
+            // The absolute overlay Box has a dynamic border-color — it should be present in DOM
+            const overlay = container.querySelector('[style*="border"]') ?? container.querySelector('div > div');
+            expect(overlay).toBeInTheDocument();
+        });
+    });
+    describe('DnD ID namespacing', () => {
+        it('passes the namespaced id to useDraggable', async () => {
+            const { useDraggable } = await import('@dnd-kit/core');
+            renderEntry({ caseId: 'case-1', itemType: 'hit', path: 'folder/item' });
+            expect(vi.mocked(useDraggable)).toHaveBeenCalledWith(expect.objectContaining({ id: 'case-1:hit:folder/item' }));
+        });
+        it('passes the namespaced id to useDroppable', async () => {
+            renderEntry({ caseId: 'case-1', itemType: 'folder', path: 'docs' });
+            expect(vi.mocked(useDroppable)).toHaveBeenCalledWith(expect.objectContaining({ id: 'case-1:folder:docs' }));
+        });
+        it('uses empty string prefix when caseId is null', async () => {
+            const { useDraggable } = await import('@dnd-kit/core');
+            renderEntry({ caseId: null, itemType: 'hit', path: 'item' });
+            expect(vi.mocked(useDraggable)).toHaveBeenCalledWith(expect.objectContaining({ id: ':hit:item' }));
+        });
+    });
+    describe('drag disabled when caseId is falsy', () => {
+        it('disables dragging when caseId is null', async () => {
+            const { useDraggable } = await import('@dnd-kit/core');
+            renderEntry({ caseId: null });
+            expect(vi.mocked(useDraggable)).toHaveBeenCalledWith(expect.objectContaining({ disabled: true }));
+        });
+        it('enables dragging when caseId is set', async () => {
+            const { useDraggable } = await import('@dnd-kit/core');
+            renderEntry({ caseId: 'case-1' });
+            expect(vi.mocked(useDraggable)).toHaveBeenCalledWith(expect.objectContaining({ disabled: false }));
+        });
+    });
+    describe('click handler', () => {
+        it('calls onClick when the entry is clicked', async () => {
+            const onClick = vi.fn();
+            renderEntry({ onClick });
+            await userEvent.click(screen.getByText('my label'));
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe('drag data payload', () => {
+        it('includes type, label, entry, and caseId in drag data', async () => {
+            const { useDraggable } = await import('@dnd-kit/core');
+            const entry = hitItem('folder/item');
+            renderEntry({ caseId: 'case-1', itemType: 'hit', label: 'my label', entry });
+            expect(vi.mocked(useDraggable)).toHaveBeenCalledWith(expect.objectContaining({
+                data: { type: 'hit', label: 'my label', entry, caseId: 'case-1' }
+            }));
+        });
+    });
+});

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

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+declare const RootDropZone: FC<{
+    caseId: string;
+}>;
+export default RootDropZone;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDndContext, useDroppable } from '@dnd-kit/core';
+import { Inbox } from '@mui/icons-material';
+import { alpha, Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+const RootDropZone = ({ caseId }) => {
+    const { t } = useTranslation();
+    const { active } = useDndContext();
+    const { setNodeRef, isOver } = useDroppable({
+        id: `${caseId}:folder:__root__`,
+        data: { path: '', caseId }
+    });
+    if (!active) {
+        return null;
+    }
+    return (_jsxs(Box, { ref: setNodeRef, sx: theme => ({
+            minHeight: '250px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 1,
+            border: '2px dashed',
+            borderColor: isOver ? theme.palette.primary.main : theme.palette.divider,
+            borderRadius: 1,
+            mx: 1,
+            mt: 1,
+            transition: theme.transitions.create(['border-color', 'background-color']),
+            bgcolor: isOver ? alpha(theme.palette.primary.main, 0.08) : 'transparent',
+            color: isOver ? theme.palette.primary.main : theme.palette.text.secondary
+        }), children: [_jsx(Inbox, { fontSize: "large", sx: { opacity: 0.6 } }), _jsx(Typography, { variant: "caption", children: t('page.cases.folder.drop.root') })] }));
+};
+export default RootDropZone;

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

@@ -0,0 +1,9 @@
+import type { Item } from 'models/entities/generated/Item';
+
+export type Tree = {
+  path: string;
+  leaves?: Item[];
+  folders?: {
+    [key: string]: Tree;
+  };
+};

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

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

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

@@ -0,0 +1,29 @@
+import { get, set, sortBy, take } from 'lodash-es';
+export const buildTree = (items = []) => {
+    // Root tree node stores direct children in `leaves`; subfolders live under `folders`.
+    const tree = { leaves: [], path: '' };
+    sortBy(items, 'path').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();
+        // Ensure each folder node exists and has its path set.
+        parts.forEach((_, index) => {
+            const folderPath = `folders.${take(parts, index + 1).join('.folders.')}`;
+            set(tree, `${folderPath}.path`, take(parts, index + 1).join('/'));
+        });
+        if (parts.length > 0) {
+            // Navigate to the target folder via the `folders` nesting and append the leaf.
+            const folderPath = `folders.${parts.join('.folders.')}`;
+            const size = get(tree, folderPath)?.leaves?.length ?? 0;
+            set(tree, `${folderPath}.leaves.${size}`, item);
+            return;
+        }
+        // Items without parent folders are top-level leaves.
+        tree.leaves.push(item);
+    });
+    return tree;
+};

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

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

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

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import { buildTree } from './utils';
+const hit = (path, value = path) => ({ type: 'hit', value, path });
+describe('buildTree', () => {
+    it('returns an empty tree for no items', () => {
+        expect(buildTree()).toEqual({ path: '', leaves: [] });
+    });
+    it('returns an empty tree for an empty array', () => {
+        expect(buildTree([])).toEqual({ path: '', leaves: [] });
+    });
+    it('ignores items with no path', () => {
+        const noPath = { type: 'hit', value: 'x' };
+        expect(buildTree([noPath])).toEqual({ path: '', leaves: [] });
+    });
+    it('places a path-less item alongside a valid one without affecting the folder', () => {
+        const valid = hit('folder/item');
+        const noPath = { type: 'hit', value: 'x' };
+        const result = buildTree([valid, noPath]);
+        expect(result.leaves).toEqual([]);
+        expect(result.folders?.folder.leaves).toEqual([valid]);
+    });
+    it('places an item with a filename but no folder as a top-level leaf', () => {
+        const flat = hit('flat-item');
+        const result = buildTree([flat]);
+        expect(result.leaves).toEqual([flat]);
+        expect(result.folders).toBeUndefined();
+    });
+    it('places an item in a single-level folder', () => {
+        const nested = hit('folderA/item');
+        const result = buildTree([nested]);
+        expect(result.leaves).toEqual([]);
+        expect(result.folders?.folderA).toMatchObject({ path: 'folderA', leaves: [nested] });
+    });
+    it('sets path correctly for a single-level folder', () => {
+        const result = buildTree([hit('folderA/item')]);
+        expect(result.folders?.folderA.path).toBe('folderA');
+    });
+    it('places an item in a two-level nested folder', () => {
+        const deep = hit('a/b/item');
+        const result = buildTree([deep]);
+        expect(result.folders?.a.folders?.b.leaves).toEqual([deep]);
+    });
+    it('sets path correctly for deeply nested folders', () => {
+        const result = buildTree([hit('a/b/item')]);
+        expect(result.folders?.a.path).toBe('a');
+        expect(result.folders?.a.folders?.b.path).toBe('a/b');
+    });
+    it('groups multiple items under the same folder', () => {
+        const item1 = hit('folder/item1', 'v1');
+        const item2 = hit('folder/item2', 'v2');
+        const result = buildTree([item1, item2]);
+        const leaves = result.folders?.folder.leaves ?? [];
+        expect(leaves).toHaveLength(2);
+        expect(leaves).toEqual(expect.arrayContaining([item1, item2]));
+    });
+    it('handles multiple top-level folders independently', () => {
+        const hitA = hit('folderA/item', 'a');
+        const hitB = hit('folderB/item', 'b');
+        const result = buildTree([hitA, hitB]);
+        expect(result.folders?.folderA.leaves).toEqual([hitA]);
+        expect(result.folders?.folderB.leaves).toEqual([hitB]);
+    });
+    it('handles a mix of top-level leaves and folder items', () => {
+        const flat = hit('flat-item', 'flat');
+        const nested = hit('folder/item', 'nested');
+        const result = buildTree([flat, nested]);
+        expect(result.leaves).toEqual([flat]);
+        expect(result.folders?.folder.leaves).toEqual([nested]);
+    });
+    it('places items across sibling folders at different depths', () => {
+        const shallow = hit('a/item', 'shallow');
+        const deep = hit('a/b/item', 'deep');
+        const result = buildTree([shallow, deep]);
+        expect(result.folders?.a.leaves).toEqual([shallow]);
+        expect(result.folders?.a.folders?.b.leaves).toEqual([deep]);
+    });
+    it('preserves all item fields on leaves', () => {
+        const rich = { type: 'reference', value: 'https://example.com', path: 'links/example' };
+        const result = buildTree([rich]);
+        expect(result.folders?.links.leaves?.[0]).toEqual(rich);
+    });
+});

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;
+    update: (update: Partial<Case>, publish?: boolean) => 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,51 @@
+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 update = useCallback(async (_updatedCase, publish = true) => {
+        if (!_case?.case_id) {
+            return;
+        }
+        try {
+            if (publish) {
+                setCase(await dispatchApi(api.v2.case.put(_case.case_id, _updatedCase)));
+            }
+            else {
+                setCase(prevCase => {
+                    if (!prevCase) {
+                        return prevCase;
+                    }
+                    return {
+                        ...prevCase,
+                        ..._updatedCase
+                    };
+                });
+            }
+        }
+        catch (e) {
+            setMissing(true);
+        }
+        finally {
+            return;
+        }
+    }, [_case?.case_id, dispatchApi]);
+    return { case: _case, update, loading, missing };
+};
+export default useCase;

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

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

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

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

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

@@ -0,0 +1,9 @@
+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 } from 'react';
+declare const RenameItemModal: FC<{
+    _case: Case;
+    leaf: Item;
+    onRenamed?: (updatedCase: Case) => void;
+}>;
+export default RenameItemModal;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const RenameItemModal = ({ _case, leaf, onRenamed }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { close } = useContext(ModalContext);
+    const currentPath = leaf.path ?? '';
+    const lastSlash = currentPath.lastIndexOf('/');
+    const folderPrefix = lastSlash >= 0 ? currentPath.slice(0, lastSlash) : '';
+    const currentName = lastSlash >= 0 ? currentPath.slice(lastSlash + 1) : currentPath;
+    const [name, setName] = useState(currentName);
+    const newPath = folderPrefix ? `${folderPrefix}/${name}` : name;
+    const existingPaths = useMemo(() => new Set((_case.items ?? []).filter(item => item.value !== leaf.value).map(item => item.path)), [_case.items, leaf.value]);
+    const nameError = useMemo(() => {
+        if (!name.trim()) {
+            return t('modal.cases.rename_item.error.empty');
+        }
+        if (name.includes('/')) {
+            return t('modal.cases.rename_item.error.slash');
+        }
+        if (existingPaths.has(newPath)) {
+            return t('modal.cases.rename_item.error.taken');
+        }
+        return null;
+    }, [name, newPath, existingPaths, t]);
+    const isValid = !nameError;
+    const onSubmit = async () => {
+        if (!isValid || !_case.case_id || !leaf.value) {
+            return;
+        }
+        const updatedCase = await dispatchApi(api.v2.case.items.patch(_case.case_id, leaf.value, newPath));
+        if (updatedCase) {
+            onRenamed?.(updatedCase);
+            close();
+        }
+    };
+    return (_jsxs(Stack, { spacing: 2, p: 2, sx: { minWidth: 'min(600px, 60vw)' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.rename_item') }), folderPrefix && (_jsx(Typography, { variant: "body2", color: "textSecondary", children: t('modal.cases.rename_item.folder_path', { path: folderPrefix }) })), _jsx(TextField, { size: "small", label: t('modal.cases.rename_item.new_name'), value: name, onChange: ev => setName(ev.target.value), error: !!nameError, helperText: nameError ?? ' ', fullWidth: true, autoFocus: true, onKeyDown: ev => {
+                    if (ev.key === 'Enter' && isValid) {
+                        onSubmit();
+                    }
+                } }), _jsxs(Stack, { direction: "row", justifyContent: "flex-end", spacing: 1, children: [_jsx(Button, { onClick: close, color: "error", variant: "outlined", children: t('button.cancel') }), _jsx(Button, { onClick: onSubmit, color: "success", variant: "outlined", disabled: !isValid, children: t('button.confirm') })] })] }));
+};
+export default RenameItemModal;

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

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