@cccsaurora/howler-ui 2.15.0-dev.335 → 2.15.0-dev.341

package/components/elements/hit/related/PivotLink.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Skeleton } from '@mui/material';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorOutline } from '@mui/icons-material';
+import { Card, Tooltip } from '@mui/material';
 import Handlebars from 'handlebars';
 import { isEmpty } from 'lodash-es';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
 import { flattenDeep } from '@cccsaurora/howler-ui/utils/utils';
@@ -33,17 +34,30 @@ const PivotLink = ({ pivot, hit, compact = false }) => {
     if (href) {
         return _jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, icon: pivot.icon });
     }
+    // Hide a relatively useless console error, we'll show a UI component instead
+    // eslint-disable-next-line no-console
+    const oldError = console.error;
+    let pluginPivot = null;
     try {
-        const pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });
-        if (pluginPivot) {
-            return pluginPivot;
-        }
+        // eslint-disable-next-line no-console
+        console.error = () => { };
+        pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });
     }
-    catch (e) {
+    finally {
         // eslint-disable-next-line no-console
-        console.warn(`Pivot plugin for format ${pivot.format} does not exist, not rendering`);
-        return null;
+        console.error = oldError;
+    }
+    if (pluginPivot) {
+        return pluginPivot;
     }
-    return _jsx(Skeleton, { variant: "rounded" });
+    return (_jsx(Card, { variant: "outlined", sx: { display: 'flex', alignItems: 'center', px: 1 }, children: _jsx(Tooltip, { title: _jsxs(_Fragment, { children: [_jsx("span", { children: `Missing Pivot Implementation ${pivot.format}` }), _jsx("code", { children: _jsx("pre", { children: JSON.stringify(pivot, null, 4) }) })] }), slotProps: {
+                popper: {
+                    sx: {
+                        '& > .MuiTooltip-tooltip': {
+                            maxWidth: '90vw !important'
+                        }
+                    }
+                }
+            }, children: _jsx(ErrorOutline, { color: "error" }) }) }));
 };
 export default PivotLink;

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.js

@@ -6,11 +6,21 @@ 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 { act } from 'react';
+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))
@@ -131,6 +141,21 @@ describe('DossierCard', () => {
                 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 () => {
@@ -174,6 +199,49 @@ describe('DossierCard', () => {
                 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 () => {
@@ -236,6 +304,114 @@ describe('DossierCard', () => {
             });
         });
     });
+    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' });
@@ -271,7 +447,9 @@ describe('DossierCard', () => {
                 title: 'Complete Dossier',
                 query: 'howler.status:open AND howler.assigned:me',
                 type: 'personal',
-                owner: 'admin'
+                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
@@ -283,6 +461,9 @@ describe('DossierCard', () => {
                 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 () => {
@@ -330,6 +511,8 @@ describe('DossierCard', () => {
                 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 () => {

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/components/routes/hits/search/InformationPane.js

@@ -77,6 +77,13 @@ const InformationPane = ({ onClose }) => {
         setUserIds(getUserList(hit));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getHit, selected]);
+    useEffect(() => {
+        if (selected) {
+            setAnalytic(null);
+            setDossiers(null);
+            setHasOverview(false);
+        }
+    }, [selected]);
     useEffect(() => {
         if (hit && !analytic) {
             getMatchingAnalytic(hit).then(setAnalytic);

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.335",
+  "version": "2.15.0-dev.341",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",