@cccsaurora/howler-ui 2.15.0-dev.333 → 2.15.0-dev.339

package/components/elements/display/HowlerAvatar.js

@@ -2,9 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar, Tooltip, useTheme } from '@mui/material';
 import { AvatarContext } from '@cccsaurora/howler-ui/components/app/providers/AvatarProvider';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { nameToInitials } from '@cccsaurora/howler-ui/utils/stringUtils';
 import { stringToColor } from '@cccsaurora/howler-ui/utils/utils';
 const HowlerAvatar = ({ userId, ...avatarProps }) => {
+    const { t } = useTranslation();
     const { getAvatar } = useContext(AvatarContext);
     const theme = useTheme();
     const [props, setProps] = useState();
@@ -35,10 +37,10 @@ const HowlerAvatar = ({ userId, ...avatarProps }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [userId]);
     if (userId) {
-        return (_jsx(Tooltip, { title: userId, children: _jsx(Avatar, { ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }) }));
+        return (_jsx(Tooltip, { title: userId, children: _jsx(Avatar, { "aria-label": userId, ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }) }));
     }
     else {
-        return (_jsx(Avatar, { ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }));
+        return (_jsx(Avatar, { "aria-label": t('unknown'), ...avatarProps, ...props, sx: { ...(avatarProps?.sx || {}), ...(props?.sx || {}) } }));
     }
 };
 export default memo(HowlerAvatar);

package/components/routes/dossiers/DossierCard.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Delete, Language, Person } from '@mui/icons-material';
-import { Box, Card, IconButton, Stack, Tooltip, Typography } from '@mui/material';
-import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+import { Delete, Language, ManageSearch, Person } from '@mui/icons-material';
+import { Box, Card, Chip, Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import { isEmpty } from 'lodash-es';
 import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
 const DossierCard = ({ dossier, className, onDelete }) => {
-    const { t } = useTranslation();
-    return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", display: "flex", alignItems: "start", children: [_jsx(Tooltip, { title: t(`route.dossiers.manager.${dossier.type}`), children: dossier.type === 'personal' ? _jsx(Person, { fontSize: "small" }) : _jsx(Language, { fontSize: "small" }) }), _jsx(Box, { component: "span", ml: 1, children: dossier.title })] }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: _jsx("code", { children: dossier.query }) })] }), _jsx(FlexOne, {}), _jsx(HowlerAvatar, { sx: { height: '24px', width: '24px' }, userId: dossier.owner }), onDelete && (_jsx(Tooltip, { title: t('route.dossiers.manager.delete'), children: _jsx(IconButton, { onClick: e => onDelete(e, dossier.dossier_id), children: _jsx(Delete, {}) }) }))] }) }, dossier.dossier_id));
+    const { t, i18n } = useTranslation();
+    return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsxs(Stack, { sx: { flex: 1 }, children: [_jsxs(Typography, { variant: "body1", display: "flex", alignItems: "start", children: [_jsx(Tooltip, { title: t(`route.dossiers.manager.${dossier.type}`), children: dossier.type === 'personal' ? _jsx(Person, { fontSize: "small" }) : _jsx(Language, { fontSize: "small" }) }), _jsx(Box, { component: "span", ml: 1, children: dossier.title })] }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: _jsx("code", { children: dossier.query }) }), _jsxs(Stack, { spacing: 1, direction: "row", sx: { mt: 1 }, children: [dossier.leads?.map((lead, index) => (_jsx(Chip, { clickable: true, label: `${lead.label?.[i18n.language] ?? t('unknown')} (${lead.format})`, size: "small", component: Link, to: `/dossiers/${dossier.dossier_id}/edit?tab=leads&lead=${index}`, onClick: e => e.stopPropagation() }, lead.format + lead.label?.en))), !isEmpty(dossier.leads) && !isEmpty(dossier.pivots) && _jsx(Divider, { flexItem: true, orientation: "vertical" }), dossier.pivots?.map((pivot, index) => (_jsx(Chip, { clickable: true, label: `${pivot.label?.[i18n.language] ?? t('unknown')} (${pivot.format})`, size: "small", component: Link, to: `/dossiers/${dossier.dossier_id}/edit?tab=pivots&pivot=${index}`, onClick: e => e.stopPropagation() }, pivot.format + pivot.label?.en)))] })] }), _jsx(HowlerAvatar, { sx: { height: '28px', width: '28px' }, userId: dossier.owner }), _jsx(Tooltip, { title: t('route.dossiers.manager.openinsearch'), children: _jsx(IconButton, { component: Link, to: `/search?query=${dossier.query}`, onClick: e => e.stopPropagation(), children: _jsx(ManageSearch, {}) }) }), onDelete && (_jsx(Tooltip, { title: t('route.dossiers.manager.delete'), children: _jsx(IconButton, { onClick: e => onDelete(e, dossier.dossier_id), children: _jsx(Delete, {}) }) }))] }) }, dossier.dossier_id));
 };
 export default DossierCard;

package/components/routes/dossiers/DossierCard.test.d.ts

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

package/components/routes/dossiers/DossierCard.test.js

@@ -0,0 +1,593 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/jsx-no-literals */
+/* eslint-disable import/imports-first */
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import { AvatarContext } from '@cccsaurora/howler-ui/components/app/providers/AvatarProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import React, { act } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { createMockDossier } from '@cccsaurora/howler-ui/tests/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import DossierCard from './DossierCard';
+// Mock react-router-dom
+const mockNavigate = vi.hoisted(() => vi.fn());
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useNavigate: () => mockNavigate,
+        Link: React.forwardRef(({ to, children, ...props }, ref) => (_jsx("a", { ref: ref, "data-to": to, ...props, children: children })))
+    };
+});
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const mockAvatarContext = {
+    getAvatar: vi.fn(userId => Promise.resolve('https://images.example.com/' + userId))
+};
+// Test wrapper
+const Wrapper = ({ children }) => {
+    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(AvatarContext.Provider, { value: mockAvatarContext, children: children }) }));
+};
+describe('DossierCard', () => {
+    let user;
+    let mockOnDelete;
+    beforeEach(() => {
+        user = userEvent.setup();
+        mockOnDelete = vi.fn();
+        vi.clearAllMocks();
+    });
+    describe('Rendering Conditions', () => {
+        it('should render with required props only', async () => {
+            const dossier = createMockDossier();
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText('Test Dossier')).toBeInTheDocument();
+            });
+        });
+        it('should render with all props', async () => {
+            const dossier = createMockDossier();
+            render(_jsx(DossierCard, { dossier: dossier, className: "custom-class", onDelete: mockOnDelete }), {
+                wrapper: Wrapper
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Test Dossier')).toBeInTheDocument();
+            });
+        });
+        it('should apply custom className when provided', async () => {
+            const dossier = createMockDossier();
+            const { container } = render(_jsx(DossierCard, { dossier: dossier, className: "custom-class" }), { wrapper: Wrapper });
+            await waitFor(() => {
+                const card = container.querySelector('.custom-class');
+                expect(card).toBeInTheDocument();
+            });
+        });
+        it('should render without className when not provided', async () => {
+            const dossier = createMockDossier();
+            const { container } = render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(container.querySelector('.MuiCard-root')).toBeInTheDocument();
+            });
+        });
+    });
+    describe('UI Element Display', () => {
+        it('should display dossier title', async () => {
+            const dossier = createMockDossier({ title: 'My Custom Dossier' });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText('My Custom Dossier')).toBeInTheDocument();
+            });
+        });
+        it('should display dossier query in code block', async () => {
+            const dossier = createMockDossier({ query: 'howler.id:*' });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                const codeElement = screen.getByText('howler.id:*');
+                expect(codeElement).toBeInTheDocument();
+                expect(codeElement.tagName).toBe('CODE');
+            });
+        });
+        it('should display Person icon for personal dossier type', async () => {
+            const dossier = createMockDossier({ type: 'personal' });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                // Check for Person icon via MUI's data-testid or by checking the tooltip
+                const tooltip = screen.getByLabelText(/personal/i);
+                expect(tooltip).toBeInTheDocument();
+            });
+        });
+        it('should display Language icon for global dossier type', async () => {
+            const dossier = createMockDossier({ type: 'global' });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                // Check for Language icon via tooltip
+                const tooltip = screen.getByLabelText(/global/i);
+                expect(tooltip).toBeInTheDocument();
+            });
+        });
+        it('should display HowlerAvatar with correct userId', async () => {
+            const dossier = createMockDossier({ owner: 'john.doe' });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByLabelText('john.doe')).toBeInTheDocument();
+            });
+        });
+        it('should display delete button when onDelete is provided', async () => {
+            const dossier = createMockDossier();
+            render(_jsx(DossierCard, { dossier: dossier, onDelete: mockOnDelete }), { wrapper: Wrapper });
+            await waitFor(() => {
+                const deleteButton = screen.getByRole('button');
+                expect(deleteButton).toBeInTheDocument();
+            });
+        });
+        it('should not display delete button when onDelete is not provided', async () => {
+            const dossier = createMockDossier();
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.queryByRole('button')).not.toBeInTheDocument();
+            });
+        });
+        it('should have tooltip on type icon', async () => {
+            const dossier = createMockDossier({ type: 'personal' });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByLabelText(/personal/i)).toBeInTheDocument();
+            });
+        });
+        it('should have tooltip on delete button', async () => {
+            const dossier = createMockDossier();
+            render(_jsx(DossierCard, { dossier: dossier, onDelete: mockOnDelete }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByLabelText(/delete/i)).toBeInTheDocument();
+            });
+        });
+        it('should display "Open in Search" button', async () => {
+            const dossier = createMockDossier();
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByLabelText(/open in search/i)).toBeInTheDocument();
+            });
+        });
+        it('should have correct href for "Open in Search" button', async () => {
+            const dossier = createMockDossier({ query: 'howler.status:open' });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                const openButton = screen.getByLabelText(/open in search/i);
+                expect(openButton).toHaveAttribute('data-to', '/search?query=howler.status:open');
+            });
+        });
+    });
+    describe('Button States & Interactions', () => {
+        it('should call onDelete with correct parameters when delete button is clicked', async () => {
+            const dossier = createMockDossier({ dossier_id: 'my-dossier-123' });
+            render(_jsx(DossierCard, { dossier: dossier, onDelete: mockOnDelete }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByRole('button')).toBeInTheDocument();
+            });
+            const deleteButton = screen.getByRole('button');
+            await user.click(deleteButton);
+            await waitFor(() => {
+                expect(mockOnDelete).toHaveBeenCalledTimes(1);
+                expect(mockOnDelete).toHaveBeenCalledWith(expect.any(Object), 'my-dossier-123');
+            });
+        });
+        it('should call onDelete with event object', async () => {
+            const dossier = createMockDossier();
+            render(_jsx(DossierCard, { dossier: dossier, onDelete: mockOnDelete }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByRole('button')).toBeInTheDocument();
+            });
+            const deleteButton = screen.getByRole('button');
+            await user.click(deleteButton);
+            await waitFor(() => {
+                const eventArg = mockOnDelete.mock.calls[0][0];
+                expect(eventArg).toBeDefined();
+                expect(eventArg.type).toBe('click');
+            });
+        });
+        it('should not crash when delete button is clicked multiple times', async () => {
+            const dossier = createMockDossier();
+            render(_jsx(DossierCard, { dossier: dossier, onDelete: mockOnDelete }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByRole('button')).toBeInTheDocument();
+            });
+            const deleteButton = screen.getByRole('button');
+            await user.click(deleteButton);
+            await user.click(deleteButton);
+            await user.click(deleteButton);
+            await waitFor(() => {
+                expect(mockOnDelete).toHaveBeenCalledTimes(3);
+            });
+        });
+        it('should stop event propagation when Open in Search button is clicked', async () => {
+            const dossier = createMockDossier();
+            const mockParentClick = vi.fn();
+            render(_jsx("div", { onClick: mockParentClick, children: _jsx(DossierCard, { dossier: dossier }) }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByLabelText(/open in search/i)).toBeInTheDocument();
+            });
+            const openButton = screen.getByLabelText(/open in search/i);
+            await user.click(openButton);
+            await waitFor(() => {
+                expect(mockParentClick).not.toHaveBeenCalled();
+            });
+        });
+        it('should stop event propagation when lead chip is clicked', async () => {
+            const dossier = createMockDossier({
+                leads: [{ format: 'lead1', label: { en: 'Lead 1', fr: 'Piste 1' } }]
+            });
+            const mockParentClick = vi.fn();
+            render(_jsx("div", { onClick: mockParentClick, children: _jsx(DossierCard, { dossier: dossier }) }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText(/Lead 1/)).toBeInTheDocument();
+            });
+            const chip = screen.getByText(/Lead 1/);
+            await user.click(chip);
+            await waitFor(() => {
+                expect(mockParentClick).not.toHaveBeenCalled();
+            });
+        });
+        it('should stop event propagation when pivot chip is clicked', async () => {
+            const dossier = createMockDossier({
+                pivots: [{ format: 'pivot1', label: { en: 'Pivot 1', fr: 'Pivot 1' } }]
+            });
+            const mockParentClick = vi.fn();
+            render(_jsx("div", { onClick: mockParentClick, children: _jsx(DossierCard, { dossier: dossier }) }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText(/Pivot 1/)).toBeInTheDocument();
+            });
+            const chip = screen.getByText(/Pivot 1/);
+            await user.click(chip);
+            await waitFor(() => {
+                expect(mockParentClick).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe('Edge Cases', () => {
+        it('should handle empty title', async () => {
+            const dossier = createMockDossier({ title: '' });
+            const { container } = render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(container).toBeInTheDocument();
+            });
+        });
+        it('should handle empty query', async () => {
+            const dossier = createMockDossier({ query: '' });
+            const { container } = render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                const codeElement = container.querySelector('code');
+                expect(codeElement).toBeEmptyDOMElement();
+            });
+        });
+        it('should handle very long title', async () => {
+            const longTitle = 'A'.repeat(200);
+            const dossier = createMockDossier({ title: longTitle });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText(longTitle)).toBeInTheDocument();
+            });
+        });
+        it('should handle very long query', async () => {
+            const longQuery = 'howler.id:*' + ' AND howler.status:open'.repeat(50);
+            const dossier = createMockDossier({ query: longQuery });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText(longQuery)).toBeInTheDocument();
+            });
+        });
+        it('should handle special characters in title', async () => {
+            const dossier = createMockDossier({ title: '<script>alert("xss")</script>' });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText('<script>alert("xss")</script>')).toBeInTheDocument();
+            });
+        });
+        it('should handle special characters in query', async () => {
+            const dossier = createMockDossier({ query: 'howler.id:*&query=<test>' });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText('howler.id:*&query=<test>')).toBeInTheDocument();
+            });
+        });
+        it('should handle undefined owner', async () => {
+            const dossier = createMockDossier({ owner: undefined });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByLabelText('Unknown')).toBeInTheDocument();
+            });
+        });
+        it('should handle null owner', async () => {
+            const dossier = createMockDossier({ owner: null });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByLabelText('Unknown')).toBeInTheDocument();
+            });
+        });
+    });
+    describe('Leads and Pivots Display', () => {
+        it('should display lead chips when leads are present', async () => {
+            const dossier = createMockDossier({
+                leads: [
+                    { format: 'lead1', label: { en: 'Lead 1', fr: 'Piste 1' } },
+                    { format: 'lead2', label: { en: 'Lead 2', fr: 'Piste 2' } }
+                ]
+            });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText(/Lead 1/)).toBeInTheDocument();
+                expect(screen.getByText(/Lead 2/)).toBeInTheDocument();
+            });
+        });
+        it('should display pivot chips when pivots are present', async () => {
+            const dossier = createMockDossier({
+                pivots: [
+                    { format: 'pivot1', label: { en: 'Pivot 1', fr: 'Pivot 1' } },
+                    { format: 'pivot2', label: { en: 'Pivot 2', fr: 'Pivot 2' } }
+                ]
+            });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText(/Pivot 1/)).toBeInTheDocument();
+                expect(screen.getByText(/Pivot 2/)).toBeInTheDocument();
+            });
+        });
+        it('should not display chips when leads and pivots are empty', async () => {
+            const dossier = createMockDossier({
+                leads: [],
+                pivots: []
+            });
+            const { container } = render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(container.querySelectorAll('.MuiChip-root')).toHaveLength(0);
+            });
+        });
+        it('should display divider when both leads and pivots are present', async () => {
+            const dossier = createMockDossier({
+                leads: [{ format: 'lead1', label: { en: 'Lead 1', fr: 'Piste 1' } }],
+                pivots: [{ format: 'pivot1', label: { en: 'Pivot 1', fr: 'Pivot 1' } }]
+            });
+            const { container } = render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(container.querySelector('.MuiDivider-root')).toBeInTheDocument();
+            });
+        });
+        it('should not display divider when only leads are present', async () => {
+            const dossier = createMockDossier({
+                leads: [{ format: 'lead1', label: { en: 'Lead 1', fr: 'Piste 1' } }],
+                pivots: []
+            });
+            const { container } = render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(container.querySelector('.MuiDivider-root')).not.toBeInTheDocument();
+            });
+        });
+        it('should not display divider when only pivots are present', async () => {
+            const dossier = createMockDossier({
+                leads: [],
+                pivots: [{ format: 'pivot1', label: { en: 'Pivot 1', fr: 'Pivot 1' } }]
+            });
+            const { container } = render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(container.querySelector('.MuiDivider-root')).not.toBeInTheDocument();
+            });
+        });
+        it('should have correct link for lead chips', async () => {
+            const dossier = createMockDossier({
+                dossier_id: 'dossier-123',
+                leads: [{ format: 'lead1', label: { en: 'Lead 1', fr: 'Piste 1' } }]
+            });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                const chip = screen.getByText(/Lead 1/).closest('a');
+                expect(chip).toHaveAttribute('data-to', '/dossiers/dossier-123/edit?tab=leads&lead=0');
+            });
+        });
+        it('should have correct link for pivot chips', async () => {
+            const dossier = createMockDossier({
+                dossier_id: 'dossier-456',
+                pivots: [{ format: 'pivot1', label: { en: 'Pivot 1', fr: 'Pivot 1' } }]
+            });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                const chip = screen.getByText(/Pivot 1/).closest('a');
+                expect(chip).toHaveAttribute('data-to', '/dossiers/dossier-456/edit?tab=pivots&pivot=0');
+            });
+        });
+        it('should display lead format in chip label', async () => {
+            const dossier = createMockDossier({
+                leads: [{ format: 'custom-format', label: { en: 'Custom Lead', fr: 'Piste personnalisée' } }]
+            });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText(/Custom Lead \(custom-format\)/)).toBeInTheDocument();
+            });
+        });
+        it('should display pivot format in chip label', async () => {
+            const dossier = createMockDossier({
+                pivots: [{ format: 'custom-pivot', label: { en: 'Custom Pivot', fr: 'Pivot personnalisé' } }]
+            });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByText(/Custom Pivot \(custom-pivot\)/)).toBeInTheDocument();
+            });
+        });
+    });
+    describe('Dossier Types', () => {
+        it('should render correctly for personal type', async () => {
+            const dossier = createMockDossier({ type: 'personal' });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByLabelText(/personal/i)).toBeInTheDocument();
+            });
+        });
+        it('should render correctly for global type', async () => {
+            const dossier = createMockDossier({ type: 'global' });
+            render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByLabelText(/global/i)).toBeInTheDocument();
+            });
+        });
+        it('should handle switching between types', async () => {
+            const { rerender } = render(_jsx(DossierCard, { dossier: createMockDossier({ type: 'personal' }) }), {
+                wrapper: Wrapper
+            });
+            await waitFor(() => {
+                expect(screen.getByLabelText(/personal/i)).toBeInTheDocument();
+            });
+            rerender(_jsx(DossierCard, { dossier: createMockDossier({ type: 'global' }) }));
+            await waitFor(() => {
+                expect(screen.getByLabelText(/global/i)).toBeInTheDocument();
+            });
+        });
+    });
+    describe('Integration Tests', () => {
+        it('should render complete card with all elements', async () => {
+            const dossier = createMockDossier({
+                dossier_id: 'full-test',
+                title: 'Complete Dossier',
+                query: 'howler.status:open AND howler.assigned:me',
+                type: 'personal',
+                owner: 'admin',
+                leads: [{ format: 'lead1', label: { en: 'Lead 1', fr: 'Piste 1' } }],
+                pivots: [{ format: 'pivot1', label: { en: 'Pivot 1', fr: 'Pivot 1' } }]
+            });
+            render(_jsx(DossierCard, { dossier: dossier, className: "test-class", onDelete: mockOnDelete }), {
+                wrapper: Wrapper
+            });
+            await waitFor(() => {
+                // Check all elements are present
+                expect(screen.getByText('Complete Dossier')).toBeInTheDocument();
+                expect(screen.getByText('howler.status:open AND howler.assigned:me')).toBeInTheDocument();
+                expect(screen.getByLabelText(/personal/i)).toBeInTheDocument();
+                expect(screen.getByLabelText('admin')).toBeInTheDocument();
+                expect(screen.getByRole('button')).toBeInTheDocument();
+                expect(screen.getByText(/Lead 1/)).toBeInTheDocument();
+                expect(screen.getByText(/Pivot 1/)).toBeInTheDocument();
+                expect(screen.getByLabelText(/open in search/i)).toBeInTheDocument();
+            });
+        });
+        it('should handle multiple dossier cards with different data', async () => {
+            const dossiers = [
+                createMockDossier({ dossier_id: 'dossier-1', title: 'Dossier 1', type: 'personal' }),
+                createMockDossier({ dossier_id: 'dossier-2', title: 'Dossier 2', type: 'global' }),
+                createMockDossier({ dossier_id: 'dossier-3', title: 'Dossier 3', type: 'personal' })
+            ];
+            render(_jsx(Wrapper, { children: dossiers.map(dossier => (_jsx(DossierCard, { dossier: dossier, onDelete: mockOnDelete }, dossier.dossier_id))) }));
+            await waitFor(() => {
+                expect(screen.getByText('Dossier 1')).toBeInTheDocument();
+                expect(screen.getByText('Dossier 2')).toBeInTheDocument();
+                expect(screen.getByText('Dossier 3')).toBeInTheDocument();
+                expect(screen.getAllByRole('button')).toHaveLength(3);
+            });
+        });
+        it('should work with different owners', async () => {
+            const owners = ['user1', 'user2', 'admin'];
+            const { rerender } = render(_jsx(DossierCard, { dossier: createMockDossier({ owner: owners[0] }) }), {
+                wrapper: Wrapper
+            });
+            for (const owner of owners) {
+                rerender(_jsx(DossierCard, { dossier: createMockDossier({ owner }) }));
+                await waitFor(() => {
+                    expect(screen.getByLabelText(owner)).toBeInTheDocument();
+                });
+            }
+        });
+    });
+    describe('Accessibility', () => {
+        it('should have accessible delete button', async () => {
+            const dossier = createMockDossier();
+            render(_jsx(DossierCard, { dossier: dossier, onDelete: mockOnDelete }), { wrapper: Wrapper });
+            await waitFor(() => {
+                const deleteButton = screen.getByRole('button');
+                expect(deleteButton).toBeInTheDocument();
+                expect(deleteButton).toHaveAccessibleName();
+            });
+        });
+        it('should have tooltips for icons', async () => {
+            const dossier = createMockDossier({ type: 'personal' });
+            render(_jsx(DossierCard, { dossier: dossier, onDelete: mockOnDelete }), { wrapper: Wrapper });
+            await waitFor(() => {
+                // Type icon tooltip
+                expect(screen.getByLabelText(/personal/i)).toBeInTheDocument();
+                // Delete button tooltip
+                expect(screen.getByLabelText(/delete/i)).toBeInTheDocument();
+                // Open in Search button tooltip
+                expect(screen.getByLabelText(/open in search/i)).toBeInTheDocument();
+            });
+        });
+        it('should have proper semantic HTML structure', async () => {
+            const dossier = createMockDossier();
+            const { container } = render(_jsx(DossierCard, { dossier: dossier }), { wrapper: Wrapper });
+            await waitFor(() => {
+                // Should have a card
+                expect(container.querySelector('.MuiCard-root')).toBeInTheDocument();
+                // Should have code element for query
+                expect(container.querySelector('code')).toBeInTheDocument();
+            });
+        });
+        it('should maintain focus on delete button', async () => {
+            const dossier = createMockDossier();
+            render(_jsx(DossierCard, { dossier: dossier, onDelete: mockOnDelete }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.getByRole('button')).toBeInTheDocument();
+            });
+            const deleteButton = screen.getByRole('button');
+            act(() => {
+                deleteButton.focus();
+            });
+            await waitFor(() => {
+                expect(deleteButton).toHaveFocus();
+            });
+        });
+    });
+    describe('Prop Changes', () => {
+        it('should update when dossier prop changes', async () => {
+            const { rerender } = render(_jsx(DossierCard, { dossier: createMockDossier({ title: 'Original' }) }), {
+                wrapper: Wrapper
+            });
+            await waitFor(() => {
+                expect(screen.getByText('Original')).toBeInTheDocument();
+            });
+            rerender(_jsx(DossierCard, { dossier: createMockDossier({ title: 'Updated' }) }));
+            await waitFor(() => {
+                expect(screen.getByText('Updated')).toBeInTheDocument();
+                expect(screen.queryByText('Original')).not.toBeInTheDocument();
+            });
+        });
+        it('should update when onDelete prop is added', async () => {
+            const { rerender } = render(_jsx(DossierCard, { dossier: createMockDossier() }), { wrapper: Wrapper });
+            await waitFor(() => {
+                expect(screen.queryByRole('button')).not.toBeInTheDocument();
+            });
+            rerender(_jsx(DossierCard, { dossier: createMockDossier(), onDelete: mockOnDelete }));
+            await waitFor(() => {
+                expect(screen.getByRole('button')).toBeInTheDocument();
+            });
+        });
+        it('should update when onDelete prop is removed', async () => {
+            const { rerender } = render(_jsx(DossierCard, { dossier: createMockDossier(), onDelete: mockOnDelete }), {
+                wrapper: Wrapper
+            });
+            await waitFor(() => {
+                expect(screen.getByRole('button')).toBeInTheDocument();
+            });
+            rerender(_jsx(DossierCard, { dossier: createMockDossier() }));
+            await waitFor(() => {
+                expect(screen.queryByRole('button')).not.toBeInTheDocument();
+            });
+        });
+        it('should update when className changes', async () => {
+            const { container, rerender } = render(_jsx(DossierCard, { dossier: createMockDossier(), className: "class-1" }), {
+                wrapper: Wrapper
+            });
+            await waitFor(() => {
+                expect(container.querySelector('.class-1')).toBeInTheDocument();
+            });
+            rerender(_jsx(DossierCard, { dossier: createMockDossier(), className: "class-2" }));
+            await waitFor(() => {
+                expect(container.querySelector('.class-2')).toBeInTheDocument();
+                expect(container.querySelector('.class-1')).not.toBeInTheDocument();
+            });
+        });
+    });
+});

package/components/routes/dossiers/DossierEditor.js

@@ -9,7 +9,7 @@ import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { isEqual, omit, uniqBy } from 'lodash-es';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import QueryResultText from '../../elements/display/QueryResultText';
 import HitQuery from '../hits/search/HitQuery';
@@ -20,6 +20,7 @@ const DossierEditor = () => {
     const params = useParams();
     const { dispatchApi } = useMyApi();
     const navigate = useNavigate();
+    const [searchParams, setSearchParams] = useSearchParams();
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const isNarrow = useMediaQuery(`(max-width: ${i18n.language === 'en' ? 1275 : 1375}px)`);
     const [originalDossier, setOriginalDossier] = useState();
@@ -28,7 +29,7 @@ const DossierEditor = () => {
         leads: [],
         pivots: []
     });
-    const [tab, setTab] = useState('leads');
+    const [tab, setTab] = useState(searchParams.get('tab') ?? 'leads');
     const [searchTotal, setSearchTotal] = useState(-1);
     const [searchDirty, setSearchDirty] = useState(false);
     const [loading, setLoading] = useState(false);
@@ -164,6 +165,13 @@ const DossierEditor = () => {
             }
         })();
     }, [dispatchApi, dossier.query, setQuery]);
+    useEffect(() => {
+        if (searchParams.get('tab') !== tab) {
+            searchParams.set('tab', tab);
+        }
+        setSearchParams(searchParams, { replace: true });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [setSearchParams, tab]);
     return (_jsx(PageCenter, { maxWidth: "1000px", width: "100%", textAlign: "left", height: "97%", children: _jsxs(Box, { position: "relative", height: "100%", children: [_jsx(Tooltip, { title: validationError, children: _jsx("span", { children: _jsxs(Fab, { variant: "extended", size: "large", color: "primary", disabled: !dirty || !!validationError || loading, sx: theme => ({
                                 textTransform: 'none',
                                 position: 'absolute',

package/components/routes/dossiers/DossierEditor.test.js

@@ -29,6 +29,7 @@ vi.mock('react-router-dom', async () => {
     return {
         ...actual,
         useParams: vi.fn(),
+        useSearchParams: vi.fn(() => [new URLSearchParams(), () => { }]),
         useNavigate: () => vi.fn()
     };
 });
@@ -93,9 +94,10 @@ vi.mock('../hits/search/HitQuery', () => ({
 import ApiConfigProvider from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import DossierEditor from './DossierEditor';
 const mockUseParams = vi.mocked(useParams);
+const mockUseSearchParams = vi.mocked(useSearchParams);
 // eslint-disable-next-line react-hooks/rules-of-hooks
 const mockNavigate = vi.mocked(useNavigate());
 // Mock data
@@ -357,5 +359,125 @@ describe('DossierEditor', () => {
                 expect(saveButton).toBeDisabled();
             });
         });
+        describe('URL parameter synchronization', () => {
+            it('should initialize tab from URL search params', async () => {
+                const searchParams = new URLSearchParams('tab=pivots');
+                const mockSetSearchParams = vi.fn();
+                mockUseSearchParams.mockReturnValue([searchParams, mockSetSearchParams]);
+                mockUseParams.mockReturnValue({ id: null });
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    const pivotsTab = screen.getByRole('tab', { name: /pivots/i });
+                    expect(pivotsTab).toHaveAttribute('aria-selected', 'true');
+                });
+            });
+            it('should default to leads tab when no tab param in URL', async () => {
+                const searchParams = new URLSearchParams();
+                const mockSetSearchParams = vi.fn();
+                mockUseSearchParams.mockReturnValue([searchParams, mockSetSearchParams]);
+                mockUseParams.mockReturnValue({ id: null });
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    const leadsTab = screen.getByRole('tab', { name: /leads/i });
+                    expect(leadsTab).toHaveAttribute('aria-selected', 'true');
+                });
+            });
+            it('should update URL params when tab is changed', async () => {
+                const user = userEvent.setup();
+                const searchParams = new URLSearchParams();
+                const mockSetSearchParams = vi.fn();
+                mockUseSearchParams.mockReturnValue([searchParams, mockSetSearchParams]);
+                mockUseParams.mockReturnValue({ id: null });
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    expect(screen.getByRole('tab', { name: /pivots/i })).toBeInTheDocument();
+                });
+                const pivotsTab = screen.getByRole('tab', { name: /pivots/i });
+                await user.click(pivotsTab);
+                await waitFor(() => {
+                    expect(mockSetSearchParams).toHaveBeenCalled();
+                    const callArgs = mockSetSearchParams.mock.calls[mockSetSearchParams.mock.calls.length - 1];
+                    const updatedParams = callArgs[0];
+                    expect(updatedParams.get('tab')).toBe('pivots');
+                });
+            });
+            it('should update search params with replace option', async () => {
+                const user = userEvent.setup();
+                const searchParams = new URLSearchParams();
+                const mockSetSearchParams = vi.fn();
+                mockUseSearchParams.mockReturnValue([searchParams, mockSetSearchParams]);
+                mockUseParams.mockReturnValue({ id: null });
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    expect(screen.getByRole('tab', { name: /pivots/i })).toBeInTheDocument();
+                });
+                const pivotsTab = screen.getByRole('tab', { name: /pivots/i });
+                await user.click(pivotsTab);
+                await waitFor(() => {
+                    expect(mockSetSearchParams).toHaveBeenCalled();
+                    const callArgs = mockSetSearchParams.mock.calls[mockSetSearchParams.mock.calls.length - 1];
+                    const options = callArgs[1];
+                    expect(options).toEqual({ replace: true });
+                });
+            });
+            it('should set tab param when switching from leads to pivots', async () => {
+                const user = userEvent.setup();
+                const searchParams = new URLSearchParams('tab=leads');
+                const mockSetSearchParams = vi.fn();
+                mockUseSearchParams.mockReturnValue([searchParams, mockSetSearchParams]);
+                mockUseParams.mockReturnValue({ id: null });
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    expect(screen.getByRole('tab', { name: /leads/i })).toHaveAttribute('aria-selected', 'true');
+                });
+                const pivotsTab = screen.getByRole('tab', { name: /pivots/i });
+                await user.click(pivotsTab);
+                await waitFor(() => {
+                    expect(mockSetSearchParams).toHaveBeenCalled();
+                    const callArgs = mockSetSearchParams.mock.calls[mockSetSearchParams.mock.calls.length - 1];
+                    const updatedParams = callArgs[0];
+                    expect(updatedParams.get('tab')).toBe('pivots');
+                });
+            });
+            it('should set tab param when switching from pivots to leads', async () => {
+                const user = userEvent.setup();
+                const searchParams = new URLSearchParams('tab=pivots');
+                const mockSetSearchParams = vi.fn();
+                mockUseSearchParams.mockReturnValue([searchParams, mockSetSearchParams]);
+                mockUseParams.mockReturnValue({ id: null });
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    expect(screen.getByRole('tab', { name: /pivots/i })).toHaveAttribute('aria-selected', 'true');
+                });
+                const leadsTab = screen.getByRole('tab', { name: /leads/i });
+                await user.click(leadsTab);
+                await waitFor(() => {
+                    expect(mockSetSearchParams).toHaveBeenCalled();
+                    const callArgs = mockSetSearchParams.mock.calls[mockSetSearchParams.mock.calls.length - 1];
+                    const updatedParams = callArgs[0];
+                    expect(updatedParams.get('tab')).toBe('leads');
+                });
+            });
+            it('should preserve existing URL params when changing tabs', async () => {
+                const user = userEvent.setup();
+                const searchParams = new URLSearchParams('tab=leads&other=value');
+                const mockSetSearchParams = vi.fn();
+                mockUseSearchParams.mockReturnValue([searchParams, mockSetSearchParams]);
+                mockUseParams.mockReturnValue({ id: null });
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    expect(screen.getByRole('tab', { name: /pivots/i })).toBeInTheDocument();
+                });
+                const pivotsTab = screen.getByRole('tab', { name: /pivots/i });
+                await user.click(pivotsTab);
+                await waitFor(() => {
+                    expect(mockSetSearchParams).toHaveBeenCalled();
+                    const callArgs = mockSetSearchParams.mock.calls[mockSetSearchParams.mock.calls.length - 1];
+                    const updatedParams = callArgs[0];
+                    expect(updatedParams.get('tab')).toBe('pivots');
+                    expect(updatedParams.get('other')).toBe('value');
+                });
+            });
+        });
     });
 });

package/components/routes/dossiers/LeadForm.js

@@ -4,12 +4,22 @@ import { Add } from '@mui/icons-material';
 import { Alert, Button, Paper, Stack, Tab, Tabs } from '@mui/material';
 import isNull from 'lodash-es/isNull';
 import merge from 'lodash-es/merge';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
 import LeadEditor from './LeadEditor';
 const LeadForm = ({ dossier, setDossier, loading }) => {
     const { t, i18n } = useTranslation();
-    const [tab, setTab] = useState(0);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [tab, setTab] = useState(parseInt(searchParams.get('lead') ?? '0'));
+    useEffect(() => {
+        searchParams.delete('pivot');
+        if (searchParams.get('lead') !== tab.toString()) {
+            searchParams.set('lead', tab.toString());
+        }
+        setSearchParams(searchParams, { replace: true });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [setSearchParams, tab]);
     return (_jsxs(Paper, { sx: { p: 1, display: 'flex', flexDirection: 'column', flex: 1 }, id: "lead-form", children: [_jsxs(Stack, { direction: "row", children: [!dossier?.leads || dossier.leads.length < 1 ? (_jsx(Alert, { id: "create-lead-alert", variant: "outlined", severity: "warning", sx: {
                             mr: 1,
                             px: 1,
@@ -33,7 +43,7 @@ const LeadForm = ({ dossier, setDossier, loading }) => {
                                     { icon: 'material-symbols:add-ad', label: { en: 'New Lead', fr: 'Nouvelle Piste' } }
                                 ]
                             }));
-                        }, children: _jsx(Add, {}) })] }), _jsx(LeadEditor, { lead: (dossier.leads ?? [])[tab], update: data => setDossier(_dossier => ({
+                        }, disabled: !dossier || loading, children: _jsx(Add, {}) })] }), _jsx(LeadEditor, { lead: (dossier.leads ?? [])[tab], update: data => setDossier(_dossier => ({
                     ..._dossier,
                     leads: (_dossier.leads ?? [])
                         .map((lead, index) => {

package/components/routes/dossiers/PivotForm.js

@@ -6,9 +6,10 @@ import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers
 import isNull from 'lodash-es/isNull';
 import merge from 'lodash-es/merge';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { Fragment, useCallback, useContext, useMemo, useState } from 'react';
+import { Fragment, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
+import { useSearchParams } from 'react-router-dom';
 const LinkForm = ({ pivot, update }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
@@ -32,7 +33,8 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
     const theme = useTheme();
     const { t, i18n } = useTranslation();
     const pluginStore = usePluginStore();
-    const [tab, setTab] = useState(0);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [tab, setTab] = useState(parseInt(searchParams.get('pivot') ?? '0'));
     const update = useCallback((data) => setDossier(_dossier => ({
         ..._dossier,
         pivots: (_dossier.pivots ?? [])
@@ -53,6 +55,14 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
     })), [setDossier, tab]);
     const pivot = useMemo(() => dossier.pivots?.[tab] ?? null, [dossier.pivots, tab]);
     const icon = useMemo(() => pivot?.icon ?? 'material-symbols:find-in-page', [pivot?.icon]);
+    useEffect(() => {
+        searchParams.delete('lead');
+        if (searchParams.get('pivot') !== tab.toString()) {
+            searchParams.set('pivot', tab.toString());
+        }
+        setSearchParams(searchParams, { replace: true });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [setSearchParams, tab]);
     return (_jsx(Paper, { sx: { p: 1, display: 'flex', flexDirection: 'column', flex: 1 }, id: "pivot-form", children: _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { direction: "row", children: [!dossier?.pivots || dossier.pivots.length < 1 ? (_jsx(Alert, { variant: "outlined", severity: "warning", sx: {
                                 mr: 1,
                                 px: 1,
@@ -76,7 +86,7 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
                                         { icon: 'material-symbols:add-ad', label: { en: 'New Pivot', fr: 'Nouvelle pivot' } }
                                     ]
                                 }));
-                            }, children: _jsx(Add, {}) })] }), _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", position: "relative", children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.icon'), value: icon, disabled: !pivot, fullWidth: true, error: !iconExists(icon), sx: { '& input': { paddingLeft: '2.25rem' } }, onChange: ev => update({ icon: ev.target.value }) }), _jsx(Icon, { fontSize: "1.75rem", icon: icon, style: { position: 'absolute', left: '0.5rem' } }), _jsx(Button, { variant: "outlined", color: "error", disabled: !pivot, sx: { minWidth: '0 !important', ml: 1 }, onClick: () => update(null), children: _jsx(Delete, {}) })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { mt: `${theme.spacing(0.5)} !important` }, children: [_jsx(Typography, { color: "text.secondary", children: t('route.dossiers.manager.icon.description') }), _jsx(IconButton, { size: "small", component: "a", href: "https://icon-sets.iconify.design/", children: _jsx(OpenInNew, { fontSize: "small" }) })] }), _jsxs(Stack, { direction: "row", spacing: 2, children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.label.en'), disabled: !pivot, value: pivot?.label?.en ?? '', fullWidth: true, onChange: ev => update({ label: { en: ev.target.value } }) }), _jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.label.fr'), disabled: !pivot, value: pivot?.label?.fr ?? '', fullWidth: true, onChange: ev => update({ label: { fr: ev.target.value } }) })] }), _jsx(Autocomplete, { disabled: !pivot, options: ['link', ...howlerPluginStore.pivotFormats], renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.pivot.format') })), value: pivot?.format ?? '', onChange: (_ev, format) => update({ format, value: '', mappings: [] }) }), !!pivot?.format &&
+                            }, disabled: !dossier || loading, children: _jsx(Add, {}) })] }), _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", position: "relative", children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.icon'), value: icon, disabled: !pivot, fullWidth: true, error: !iconExists(icon), sx: { '& input': { paddingLeft: '2.25rem' } }, onChange: ev => update({ icon: ev.target.value }) }), _jsx(Icon, { fontSize: "1.75rem", icon: icon, style: { position: 'absolute', left: '0.5rem' } }), _jsx(Button, { variant: "outlined", color: "error", disabled: !pivot, sx: { minWidth: '0 !important', ml: 1 }, onClick: () => update(null), children: _jsx(Delete, {}) })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { mt: `${theme.spacing(0.5)} !important` }, children: [_jsx(Typography, { color: "text.secondary", children: t('route.dossiers.manager.icon.description') }), _jsx(IconButton, { size: "small", component: "a", href: "https://icon-sets.iconify.design/", children: _jsx(OpenInNew, { fontSize: "small" }) })] }), _jsxs(Stack, { direction: "row", spacing: 2, children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.label.en'), disabled: !pivot, value: pivot?.label?.en ?? '', fullWidth: true, onChange: ev => update({ label: { en: ev.target.value } }) }), _jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.label.fr'), disabled: !pivot, value: pivot?.label?.fr ?? '', fullWidth: true, onChange: ev => update({ label: { fr: ev.target.value } }) })] }), _jsx(Autocomplete, { disabled: !pivot, options: ['link', ...howlerPluginStore.pivotFormats], renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.pivot.format') })), value: pivot?.format ?? null, onChange: (_ev, format) => update({ format, value: '', mappings: [] }) }), !!pivot?.format &&
                             (pivot.format === 'link' ? (_jsx(LinkForm, { pivot: pivot, update: update })) : (pluginStore.executeFunction(`pivot.${pivot.format}.form`, { pivot, update })))] })] }) }));
 };
 export default PivotForm;

package/locales/en/translation.json

@@ -628,6 +628,7 @@
     "route.dossiers.manager.format": "Lead Format",
     "route.dossiers.manager.tabs.leads": "Leads",
     "route.dossiers.manager.tabs.pivots": "Pivots",
+    "route.dossiers.manager.openinsearch": "Open in Search",
     "route.dossiers.manager.pivot.create": "You currently have no pivots configured. Press the add button to the right to create a new one.",
     "route.dossiers.manager.pivot.icon": "Pivot Icon",
     "route.dossiers.manager.pivot.label.en": "English Title",

package/locales/fr/translation.json

@@ -629,6 +629,7 @@
     "route.dossiers.manager.format": "Format de la piste",
     "route.dossiers.manager.tabs.leads": "Pistes",
     "route.dossiers.manager.tabs.pivots": "Pivots",
+    "route.dossiers.manager.openinsearch": "Ouvrir en recherche",
     "route.dossiers.manager.pivot.create": "Vous n'avez actuellement aucun pivot configuré. Appuyez sur le bouton Ajouter à droite pour en créer un nouveau.",
     "route.dossiers.manager.pivot.icon": "Icône du pivot",
     "route.dossiers.manager.pivot.label.en": "English Title",

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.15.0-dev.333",
+  "version": "2.15.0-dev.339",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/tests/utils.d.ts

@@ -1,5 +1,6 @@
 import type { Action } from '@cccsaurora/howler-ui/models/entities/generated/Action';
 import type { Analytic } from '@cccsaurora/howler-ui/models/entities/generated/Analytic';
+import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { Template } from '@cccsaurora/howler-ui/models/entities/generated/Template';
 import type { View } from '@cccsaurora/howler-ui/models/entities/generated/View';
@@ -11,4 +12,5 @@ export declare const createMockAnalytic: (overrides?: Partial<Analytic>) => Anal
 export declare const createMockTemplate: (overrides?: Partial<Template>) => Template;
 export declare const createMockAction: (overrides?: Partial<Action>) => Action;
 export declare const createMockView: (overrides?: Partial<View>) => View;
+export declare const createMockDossier: (overrides?: Partial<Dossier>) => Dossier;
 export {};

package/tests/utils.js

@@ -52,3 +52,12 @@ export const createMockView = (overrides) => ({
     },
     ...overrides
 });
+// Helper function to create mock dossiers
+export const createMockDossier = (overrides) => ({
+    dossier_id: 'test-dossier-id',
+    title: 'Test Dossier',
+    query: 'howler.status:open',
+    type: 'personal',
+    owner: 'test-user',
+    ...overrides
+});