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

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.test.d.ts

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

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

@@ -0,0 +1,410 @@
+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 { 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';
+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();
+            });
+        });
+    });
+    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);
+            });
+        });
+    });
+    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('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'
+            });
+            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();
+            });
+        });
+        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();
+            });
+        });
+        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/hits/search/ViewLink.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Close, Edit, SavedSearch } from '@mui/icons-material';
+import { Close, Edit, Language, Lock, OpenInNew, Person, Refresh, SavedSearch } from '@mui/icons-material';
 import { Alert, IconButton, Stack, Tooltip, Typography } from '@mui/material';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
@@ -15,6 +15,7 @@ const ViewLink = () => {
     const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
     const span = useContextSelector(ParameterContext, ctx => ctx.span);
     const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+    const search = useContextSelector(HitSearchContext, ctx => ctx.search);
     const viewsReady = useContextSelector(ViewContext, ctx => has(ctx.views, viewId));
     const selectedView = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     const viewUrl = useMemo(() => {
@@ -33,10 +34,14 @@ const ViewLink = () => {
         }
         return keys.length > 0 ? `/views/create?${keys.join('&')}` : '/views/create';
     }, [query, sort, span, viewId]);
-    const viewButton = useMemo(() => (_jsx(Tooltip, { title: viewId ? t('route.views.edit') : t('route.views.create'), children: _jsx(IconButton, { size: "small", component: Link, disabled: (!viewId && !query) || span?.endsWith('custom'), to: viewUrl, children: viewId ? _jsx(Edit, { fontSize: "small" }) : _jsx(SavedSearch, {}) }) })), [query, span, t, viewId, viewUrl]);
+    const viewButton = useMemo(() => (_jsx(Tooltip, { title: viewId ? t('route.views.edit') : t('route.views.create'), children: _jsx(IconButton, { "aria-label": viewId ? t('route.views.edit') : t('route.views.create'), size: "small", component: Link, disabled: (!viewId && !query) || span?.endsWith('custom'), to: viewUrl, role: "link", children: viewId ? _jsx(Edit, { fontSize: "small" }) : _jsx(SavedSearch, {}) }) })), [query, span, t, viewId, viewUrl]);
     if (!viewId) {
         return null;
     }
-    return selectedView ? (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Tooltip, { title: selectedView.query, children: _jsx(Typography, { sx: { color: 'text.primary' }, variant: "body1", component: Link, to: `/views/${selectedView.view_id}/edit`, children: t(selectedView.title) }) }), viewButton] })) : (viewsReady && (_jsx(Alert, { variant: "outlined", severity: "error", action: _jsx(IconButton, { size: "small", component: Link, to: "/search", children: _jsx(Close, { fontSize: "small" }) }), children: t('view.notfound') })));
+    return selectedView ? (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Tooltip, { title: t(`route.views.manager.${selectedView.type}`), children: {
+                    readonly: _jsx(Lock, { fontSize: "small", "aria-label": t(`route.views.manager.${selectedView.type}`) }),
+                    global: _jsx(Language, { fontSize: "small", "aria-label": t(`route.views.manager.${selectedView.type}`) }),
+                    personal: _jsx(Person, { fontSize: "small", "aria-label": t(`route.views.manager.${selectedView.type}`) })
+                }[selectedView.type] }), _jsx(Tooltip, { title: selectedView.query, children: _jsx(Typography, { role: "link", sx: { color: 'text.primary' }, variant: "body1", component: Link, to: `/views/${selectedView.view_id}/edit`, "aria-label": `${t(selectedView.title)} - ${selectedView.query ?? t('unknown')}`, children: t(selectedView.title) }) }), viewButton, _jsx(Tooltip, { title: t('view.refresh'), children: _jsx(IconButton, { size: "small", onClick: () => search(query), "aria-label": t('view.refresh'), children: _jsx(Refresh, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('view.open'), children: _jsx(IconButton, { size: "small", component: Link, to: `/search?query=${selectedView.query}`, "aria-label": t('view.open'), role: "link", children: _jsx(OpenInNew, { fontSize: "small" }) }) })] })) : (viewsReady && (_jsx(Alert, { role: "alert", variant: "outlined", severity: "error", "aria-live": "assertive", "aria-atomic": "true", action: _jsx(IconButton, { size: "small", component: Link, to: "/search", children: _jsx(Close, { fontSize: "small" }) }), children: t('view.notfound') })));
 };
 export default memo(ViewLink);

package/components/routes/hits/search/ViewLink.test.d.ts

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

package/components/routes/hits/search/ViewLink.test.js

@@ -0,0 +1,375 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react/jsx-no-literals */
+/* eslint-disable import/imports-first */
+/// <reference types="vitest" />
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent, {} from '@testing-library/user-event';
+import React, { createContext, useContext } from 'react';
+import { vi } from 'vitest';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// Mock use-context-selector
+vi.mock('use-context-selector', async () => {
+    return {
+        createContext,
+        useContextSelector: (context, selector) => {
+            return selector(useContext(context));
+        }
+    };
+});
+// Mock react-router-dom
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        Link: React.forwardRef(({ to, children, ...props }, ref) => (_jsx("a", { ref: ref, href: to, ...props, children: children })))
+    };
+});
+// Import component after mocks
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { createMockView } from '@cccsaurora/howler-ui/tests/utils';
+import ViewLink from './ViewLink';
+// Mock contexts
+const mockSearch = vi.fn();
+let mockParameterContext = {
+    query: 'howler.id:*',
+    sort: 'event.created desc',
+    span: 'date.range.1.month',
+    setQuery: vi.fn(),
+    setSort: vi.fn(),
+    setSpan: vi.fn()
+};
+let mockHitSearchContext = {
+    viewId: 'test-view-id',
+    search: mockSearch
+};
+let mockViewContext = {
+    views: {
+        'test-view-id': createMockView()
+    }
+};
+// Test wrapper
+const Wrapper = ({ children }) => {
+    return (_jsx(I18nextProvider, { i18n: i18n, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: _jsx(HitSearchContext.Provider, { value: mockHitSearchContext, children: _jsx(ViewContext.Provider, { value: mockViewContext, children: children }) }) }) }));
+};
+describe('ViewLink', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        vi.clearAllMocks();
+        // Reset mock contexts to defaults
+        mockHitSearchContext.viewId = 'test-view-id';
+        mockParameterContext.query = 'howler.id:*';
+        mockParameterContext.sort = 'event.created desc';
+        mockParameterContext.span = 'date.range.1.month';
+        mockViewContext.views = {
+            'test-view-id': createMockView()
+        };
+    });
+    describe('Rendering Conditions', () => {
+        it('should return null when viewId is not set', () => {
+            mockHitSearchContext.viewId = null;
+            const { container } = render(_jsx(ViewLink, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toBeNull();
+        });
+        it('should return null when viewId is undefined', () => {
+            mockHitSearchContext.viewId = undefined;
+            const { container } = render(_jsx(ViewLink, {}), { wrapper: Wrapper });
+            expect(container.firstChild).toBeNull();
+        });
+        it('should render selected view UI when viewId exists and view is found', () => {
+            render(_jsx(ViewLink, {}), { wrapper: Wrapper });
+            expect(screen.getByText('Test View')).toBeInTheDocument();
+        });
+        it('should render error alert when viewId exists but view is not found', () => {
+            mockHitSearchContext = { ...mockHitSearchContext, viewId: 'non-existent-view' };
+            mockViewContext = {
+                ...mockViewContext,
+                views: {
+                    ...mockViewContext.views,
+                    'non-existent-view': null
+                }
+            };
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const alert = screen.getByRole('alert');
+            expect(alert).toBeInTheDocument();
+            expect(alert).toHaveAttribute('aria-live', 'assertive');
+        });
+        it('should not render error alert when views object is empty (not ready)', () => {
+            mockHitSearchContext.viewId = 'non-existent-view';
+            mockViewContext.views = {};
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        });
+    });
+    describe('UI Element Display', () => {
+        it('should display view title as link with correct href', () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const titleLink = screen.getByText('Test View').closest('a');
+            expect(titleLink).toHaveAttribute('href', '/views/test-view-id/edit');
+        });
+        it('should display tooltip with view query on title', () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const tooltip = screen.getByText('Test View');
+            expect(tooltip).toHaveAttribute('aria-label', 'Test View - howler.status:open');
+        });
+        it('should display translated view title', () => {
+            mockViewContext.views['test-view-id'] = createMockView({
+                title: 'view.assigned_to_me'
+            });
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            // The i18n mock should translate this key
+            expect(screen.getByText(/assigned/i)).toBeInTheDocument();
+        });
+        it('should display edit icon when viewId exists', () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            // Edit icon should be present (MUI Edit icon)
+            const editButton = screen.getByRole('link', { name: /edit /i });
+            expect(editButton).toBeInTheDocument();
+        });
+        it('should display refresh button when viewId exists', () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const refreshButton = screen.getByRole('button');
+            expect(refreshButton).toBeInTheDocument();
+        });
+        it('should display open button when viewId exists', () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const openLink = screen.getByRole('link', { name: /open /i });
+            expect(openLink).toBeInTheDocument();
+            expect(openLink).toHaveAttribute('href', '/search?query=howler.status:open');
+        });
+        it('should not display refresh button when viewId is null', () => {
+            mockHitSearchContext.viewId = null;
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            expect(screen.queryByRole('button')).not.toBeInTheDocument();
+        });
+        it('should not display open button when viewId is null', () => {
+            mockHitSearchContext.viewId = null;
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            expect(screen.queryByRole('link', { name: /open /i })).not.toBeInTheDocument();
+        });
+    });
+    describe('Button States & Interactions', () => {
+        it('should call search function when refresh button is clicked', async () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const refreshButton = screen.getByRole('button');
+            await user.click(refreshButton);
+            expect(mockSearch).toHaveBeenCalledWith('howler.id:*');
+        });
+        it('should navigate to search when open button is clicked', () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const openLink = screen.getByRole('link', { name: /open /i });
+            expect(openLink).toHaveAttribute('href', '/search?query=howler.status:open');
+        });
+        it('should navigate to /search when error alert close button is clicked', () => {
+            mockHitSearchContext = { ...mockHitSearchContext, viewId: 'non-existent-view' };
+            mockViewContext = {
+                ...mockViewContext,
+                views: {
+                    ...mockViewContext.views,
+                    'non-existent-view': null
+                }
+            };
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const closeButton = screen.getByRole('alert').querySelector('a');
+            expect(closeButton).toHaveAttribute('href', '/search');
+        });
+        it('should have correct tooltip on refresh button', () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const tooltip = screen.getByRole('button');
+            expect(tooltip).toHaveAttribute('aria-label', expect.stringContaining('Refresh'));
+        });
+        it('should have correct tooltip on open button', () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const openLink = screen.getByRole('link', { name: /open /i });
+            expect(openLink).toHaveAttribute('aria-label', expect.stringContaining('Open'));
+        });
+    });
+    describe('URL Generation (viewUrl)', () => {
+        it('should generate edit URL when viewId exists', () => {
+            render(_jsx(ViewLink, {}), { wrapper: Wrapper });
+            const editButton = screen.getByRole('link', { name: /edit/i });
+            expect(editButton).toHaveAttribute('href', '/views/test-view-id/edit');
+        });
+        it('should have edit tooltip when viewId exists', () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const editButton = screen.getByRole('link', { name: /edit/i });
+            expect(editButton).toHaveAttribute('aria-label', expect.stringContaining('Edit'));
+        });
+    });
+    describe('Edge Cases', () => {
+        it('should handle selectedView with missing title', () => {
+            mockViewContext.views['test-view-id'] = createMockView({
+                title: undefined
+            });
+            const { container } = render(_jsx(ViewLink, {}), { wrapper: Wrapper });
+            expect(container).toBeInTheDocument();
+            // Component should still render without crashing
+        });
+        it('should handle selectedView with missing query', () => {
+            mockViewContext.views['test-view-id'] = createMockView({
+                query: undefined
+            });
+            const { container } = render(_jsx(ViewLink, {}), { wrapper: Wrapper });
+            expect(container).toBeInTheDocument();
+            // Query tooltip should be empty or undefined
+            const tooltip = screen.getByText('Test View');
+            expect(tooltip).toHaveAttribute('aria-label', 'Test View - Unknown');
+        });
+        it('should handle rapid context changes', () => {
+            const { rerender } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            // Change viewId
+            mockHitSearchContext = { ...mockHitSearchContext, viewId: 'another-view-id' };
+            mockViewContext = {
+                ...mockViewContext,
+                views: {
+                    ...mockViewContext.views,
+                    'another-view-id': createMockView({
+                        view_id: 'another-view-id',
+                        title: 'Another View'
+                    })
+                }
+            };
+            rerender(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            expect(screen.getByText('Another View')).toBeInTheDocument();
+            // Change back
+            mockHitSearchContext = { ...mockHitSearchContext, viewId: 'test-view-id' };
+            rerender(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            expect(screen.getByText('Test View')).toBeInTheDocument();
+        });
+        it('should handle undefined query in parameter context', () => {
+            mockParameterContext.query = undefined;
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const refreshButton = screen.getByRole('button');
+            fireEvent.click(refreshButton);
+            expect(mockSearch).toHaveBeenCalledWith(undefined);
+        });
+        it('should handle null sort in parameter context', () => {
+            mockParameterContext.sort = null;
+            const { container } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            expect(container).toBeInTheDocument();
+        });
+        it('should handle null span in parameter context', () => {
+            mockParameterContext.span = null;
+            const { container } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            expect(container).toBeInTheDocument();
+        });
+        it('should handle view with all optional fields missing', () => {
+            mockViewContext.views['test-view-id'] = {
+                view_id: 'test-view-id'
+            };
+            const { container } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            expect(container).toBeInTheDocument();
+        });
+        it('should handle empty views object', () => {
+            mockViewContext.views = {};
+            mockHitSearchContext.viewId = 'test-view-id';
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            // Should not render error alert because viewsReady is false
+            expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        });
+    });
+    describe('Integration Tests', () => {
+        it('should work with all three contexts simultaneously', () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            // Should use values from ParameterContext
+            const refreshButton = screen.getByRole('button');
+            fireEvent.click(refreshButton);
+            expect(mockSearch).toHaveBeenCalledWith('howler.id:*');
+            // Should use values from ViewContext
+            expect(screen.getByText('Test View')).toBeInTheDocument();
+            // Should use values from HitSearchContext
+            const editButton = screen.getByRole('link', { name: /edit/i });
+            expect(editButton).toHaveAttribute('href', '/views/test-view-id/edit');
+        });
+        it('should render correctly with different view types', () => {
+            const viewTypes = ['personal', 'global', 'readonly'];
+            const { rerender } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            viewTypes.forEach(type => {
+                mockViewContext = {
+                    ...mockViewContext,
+                    views: {
+                        ...mockViewContext.views,
+                        'test-view-id': createMockView({ type })
+                    }
+                };
+                rerender(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+                expect(screen.getByLabelText(i18n.t(`route.views.manager.${type}`))).toBeInTheDocument();
+            });
+        });
+        it('should handle multiple view IDs correctly', () => {
+            mockViewContext.views = {
+                'view-1': createMockView({ view_id: 'view-1', title: 'View 1' }),
+                'view-2': createMockView({ view_id: 'view-2', title: 'View 2' }),
+                'view-3': createMockView({ view_id: 'view-3', title: 'View 3' })
+            };
+            mockHitSearchContext.viewId = 'view-2';
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            expect(screen.getByText('View 2')).toBeInTheDocument();
+            expect(screen.queryByText('View 1')).not.toBeInTheDocument();
+            expect(screen.queryByText('View 3')).not.toBeInTheDocument();
+        });
+    });
+    describe('Accessibility', () => {
+        it('should have tooltips for all icon buttons', () => {
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const editButton = screen.getByRole('link', { name: /edit /i });
+            const refreshButton = screen.getByRole('button');
+            const openButton = screen.getByRole('link', { name: /open /i });
+            expect(editButton).toHaveAttribute('aria-label');
+            expect(refreshButton).toHaveAttribute('aria-label');
+            expect(openButton).toHaveAttribute('aria-label');
+        });
+        it('should have proper role for error alert', () => {
+            mockHitSearchContext.viewId = 'non-existent-view';
+            mockViewContext.views = {
+                'non-existent-view': null,
+                'test-view-id': createMockView()
+            };
+            render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const alert = screen.getByRole('alert');
+            expect(alert).toBeInTheDocument();
+        });
+        it('should have accessible link text for view title', () => {
+            render(_jsx(ViewLink, {}), { wrapper: Wrapper });
+            const titleLink = screen.getByText('Test View').closest('a');
+            expect(titleLink).toHaveAttribute('href', '/views/test-view-id/edit');
+            expect(titleLink.textContent).toBe('Test View');
+        });
+    });
+    describe('Memoization', () => {
+        it('should not re-render unnecessarily when unrelated context values change', () => {
+            const { rerender } = render(_jsx(ViewLink, {}), { wrapper: Wrapper });
+            // Change an unrelated value
+            mockParameterContext.setQuery = vi.fn();
+            rerender(_jsx(ViewLink, {}));
+            const secondRenderButton = screen.getByRole('button');
+            // Components should still be present
+            expect(secondRenderButton).toBeInTheDocument();
+        });
+        it('should update when viewId changes', () => {
+            const { rerender } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            expect(screen.getByText('Test View')).toBeInTheDocument();
+            mockHitSearchContext = { ...mockHitSearchContext, viewId: 'another-view' };
+            mockViewContext.views['another-view'] = createMockView({
+                view_id: 'another-view',
+                title: 'Another View'
+            });
+            rerender(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            expect(screen.getByText('Another View')).toBeInTheDocument();
+        });
+        it('should update when query changes', () => {
+            const { rerender } = render(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            const refreshButton = screen.getByRole('button');
+            fireEvent.click(refreshButton);
+            expect(mockSearch).toHaveBeenCalledWith('howler.id:*');
+            mockParameterContext = { ...mockParameterContext, query: 'howler.status:closed' };
+            rerender(_jsx(Wrapper, { children: _jsx(ViewLink, {}) }));
+            fireEvent.click(refreshButton);
+            expect(mockSearch).toHaveBeenCalledWith('howler.status:closed');
+        });
+    });
+});

package/locales/en/translation.json

@@ -700,7 +700,9 @@
     "usermenu.logout": "Logout",
     "usermenu.settings": "Settings",
     "view.assigned_to_me": "Assigned to Me",
-    "view.notfound": "This view is not availiable to you, or does not exist.",
+    "view.notfound": "This view is not available to you, or does not exist.",
+    "view.open": "Open View Query",
+    "view.refresh": "Refresh View",
     "view.settings.advance_on_triage": "Advance to next hit on triage",
     "view.settings.advance_on_triage.description": "If this is enabled, triaging a hit on this view will automatically move to the next hit in line, making rapid triage of hits easier.",
     "tui.query.save.alert": "Load a saved view or save the current query as a view",

package/locales/fr/translation.json

@@ -700,6 +700,8 @@
     "usermenu.settings": "Paramètres",
     "view.assigned_to_me": "Assigné à moi",
     "view.notfound": "Cette vue n'est pas disponible pour vous, ou n'existe pas.",
+    "view.open": "Ouvrir requête de la vue",
+    "view.refresh": "Rafraîchir la vue",
     "view.settings.advance_on_triage": "Passer à la hit suivant lors du triage",
     "view.settings.advance_on_triage.description": "Si cette option est activée, le triage d'une hit sur cette vue passera automatiquement à la hit suivant, ce qui facilitera le triage rapide des résultats.",
     "Unclassified//Official Use Only": "Non classé//Réservé à des fins officielles",

package/package.json

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

package/tests/utils.d.ts

@@ -1,7 +1,9 @@
 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';
 type RecursivePartial<T> = {
     [P in keyof T]?: T[P] extends (infer U)[] ? RecursivePartial<U>[] : T[P] extends object | undefined ? RecursivePartial<T[P]> : T[P];
 };
@@ -9,4 +11,6 @@ export declare const createMockHit: (overrides?: RecursivePartial<Hit>) => Hit;
 export declare const createMockAnalytic: (overrides?: Partial<Analytic>) => Analytic;
 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

@@ -39,3 +39,25 @@ export const createMockAction = (overrides) => ({
     ],
     ...overrides
 });
+export const createMockView = (overrides) => ({
+    view_id: 'test-view-id',
+    title: 'Test View',
+    query: 'howler.status:open',
+    sort: 'event.created desc',
+    span: 'date.range.1.month',
+    type: 'personal',
+    owner: 'testuser',
+    settings: {
+        advance_on_triage: false
+    },
+    ...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
+});