@cccsaurora/howler-ui 3.0.4 → 3.0.5

package/components/routes/hits/search/InformationPane.js

@@ -46,7 +46,7 @@ const InformationPane = ({ onClose, selected: _selected }) => {
     const { emit, open } = useContext(SocketContext);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
     const selected = useContextSelector(ParameterContext, ctx => ctx?.selected) ?? _selected;
-    const pluginStore = usePluginStore();
+    const { executeFunction } = usePluginStore();
     const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const [userIds, setUserIds] = useState(new Set());
     const [analytic, setAnalytic] = useState();
@@ -59,9 +59,14 @@ const InformationPane = ({ onClose, selected: _selected }) => {
     const dossiers = useMemo(() => _dossiers ?? [], [_dossiers]);
     const users = useMyUserList(userIds);
     const record = useContextSelector(RecordContext, ctx => ctx.records[selected]);
-    howlerPluginStore.plugins.forEach(plugin => {
-        pluginStore.executeFunction(`${plugin}.on`, 'viewing');
-    });
+    useEffect(() => {
+        if (!selected) {
+            return;
+        }
+        howlerPluginStore.plugins.forEach(plugin => {
+            executeFunction(`${plugin}.on`, 'viewing');
+        });
+    }, [executeFunction, selected]);
     useEffect(() => {
         if (!selected) {
             return;

package/components/routes/hits/search/SearchPane.js

@@ -86,6 +86,7 @@ const SearchPane = () => {
     const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
     const { onClick } = useRecordSelection();
     const searchPaneWidth = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null)[0];
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const verticalSorters = useMediaQuery('(max-width: 1919px)') || (searchPaneWidth ?? Number.MAX_SAFE_INTEGER) < 900;
     const getSelectedId = useCallback((event) => {
         const target = event.target;
@@ -102,6 +103,6 @@ const SearchPane = () => {
                                                     bottom: 0,
                                                     borderBottomLeftRadius: theme.shape.borderRadius,
                                                     borderBottomRightRadius: theme.shape.borderRadius
-                                                }) }))] }), _jsx(QuerySettings, { verticalSorters: verticalSorters, boxSx: { position: 'relative', pt: 1.5 } })] }), response && (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { pt: 1 }, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: response.rows, offset: response.offset, onChange: nextOffset => setOffset(nextOffset) })] }))] }), _jsx(VSBoxContent, { mr: -1, ml: -1, mt: 1, children: _jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: !response ? (_jsx(AppListEmpty, {})) : (response.items.map(record => _jsx(Item, { record: record, onClick: onClick }, record.howler.id))) }) })] }) }) }));
+                                                }) }))] }), _jsx(QuerySettings, { verticalSorters: verticalSorters, boxSx: { position: 'relative', pt: 1.5 } })] }), response && (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { pt: 1 }, children: [_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) }), _jsx(Box, { flex: 1 }), _jsx(SearchPagination, { total: response.total, limit: pageCount, offset: response.offset, onChange: nextOffset => setOffset(nextOffset) })] }))] }), _jsx(VSBoxContent, { mr: -1, ml: -1, mt: 1, children: _jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: !response ? (_jsx(AppListEmpty, {})) : (response.items.map(record => _jsx(Item, { record: record, onClick: onClick }, record.howler.id))) }) })] }) }) }));
 };
 export default memo(SearchPane);

package/components/routes/hits/view/HitViewer.js

@@ -5,6 +5,7 @@ import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Ta
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
@@ -22,8 +23,10 @@ import RecordRelated from '@cccsaurora/howler-ui/components/elements/record/Reco
 import RecordWorklog from '@cccsaurora/howler-ui/components/elements/record/RecordWorklog';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
@@ -43,6 +46,8 @@ const HitViewer = () => {
     const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
     const [orientation, setOrientation] = useMyLocalStorageItem(StorageKey.VIEWER_ORIENTATION, Orientation.VERTICAL);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
+    const { emit, open } = useContext(SocketContext);
+    const { executeFunction } = usePluginStore();
     const getHit = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const hit = useContextSelector(RecordContext, ctx => ctx.records[params.id]);
     const [userIds, setUserIds] = useState(new Set());
@@ -62,7 +67,7 @@ const HitViewer = () => {
         }
         catch (err) {
             if (err.cause?.api_status_code === 404) {
-                navigate('/404');
+                void navigate('/404');
             }
         }
     }, [hit, getMatchingAnalytic, getHit, params.id, navigate]);
@@ -71,9 +76,34 @@ const HitViewer = () => {
             setOrientation(Orientation.HORIZONTAL);
         }
     }, [isUnderLg, setOrientation]);
+    useEffect(() => {
+        if (!hit) {
+            return;
+        }
+        howlerPluginStore.plugins.forEach(plugin => {
+            executeFunction(`${plugin}.on`, 'viewing');
+        });
+    }, [executeFunction, hit]);
     useEffect(() => {
         void fetchData();
     }, [params.id, fetchData, hit]);
+    useEffect(() => {
+        if (!params.id || !open) {
+            return;
+        }
+        emit({
+            broadcast: false,
+            action: 'viewing',
+            id: params.id
+        });
+        return () => {
+            emit({
+                broadcast: false,
+                action: 'stop_viewing',
+                id: params.id
+            });
+        };
+    }, [emit, params.id, open]);
     const onOrientationChange = useCallback(() => setOrientation(orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL), [orientation, setOrientation]);
     useEffect(() => {
         void getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));

package/components/routes/hits/view/HitViewer.test.d.ts

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

package/components/routes/hits/view/HitViewer.test.js

@@ -0,0 +1,261 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockEmit = vi.hoisted(() => vi.fn());
+const mockExecutePlugin = vi.hoisted(() => vi.fn());
+const mockOpen = vi.hoisted(() => ({ current: true }));
+const mockParams = vi.hoisted(() => ({ id: 'hit-1' }));
+const mockGetHit = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockGetMatchingAnalytic = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockGetMatchingDossiers = vi.hoisted(() => vi.fn().mockResolvedValue([]));
+const mockGetMatchingOverview = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+const mockNavigate = vi.hoisted(() => vi.fn());
+const mockUseMediaQuery = vi.hoisted(() => vi.fn(() => false));
+const mockSetOrientation = vi.hoisted(() => vi.fn());
+vi.mock('@mui/material', async () => {
+    const actual = await vi.importActual('@mui/material');
+    return {
+        ...actual,
+        useMediaQuery: mockUseMediaQuery
+    };
+});
+vi.mock('plugins/store', () => ({
+    default: {
+        plugins: ['test-plugin']
+    }
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction: mockExecutePlugin })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key,
+        i18n: { language: 'en' }
+    })
+}));
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useNavigate: () => mockNavigate,
+        useParams: () => mockParams
+    };
+});
+vi.mock('components/app/hooks/useMatchers', () => ({
+    default: () => ({
+        getMatchingAnalytic: mockGetMatchingAnalytic,
+        getMatchingDossiers: mockGetMatchingDossiers,
+        getMatchingOverview: mockGetMatchingOverview
+    })
+}));
+vi.mock('components/hooks/useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [Orientation.VERTICAL, mockSetOrientation]
+}));
+vi.mock('components/hooks/useMyUserList', () => ({
+    default: () => []
+}));
+vi.mock('utils/recordFunctions', () => ({
+    getUserList: () => new Set(['analyst'])
+}));
+vi.mock('utils/utils', () => ({
+    tryParse: (value) => `parsed:${value}`
+}));
+vi.mock('components/elements/hit/HitActions', () => ({
+    default: ({ orientation }) => _jsxs("div", { children: ["actions:", orientation] })
+}));
+vi.mock('components/elements/display/icons/SocketBadge', () => ({
+    default: () => null
+}));
+vi.mock('components/elements/hit/HitBanner', () => ({
+    default: () => _jsx("div", { children: "banner" })
+}));
+vi.mock('components/elements/hit/HitOutline', () => ({
+    default: () => _jsx("div", { children: "outline" })
+}));
+vi.mock('components/elements/hit/HitLabels', () => ({
+    default: () => _jsx("div", { children: "labels" })
+}));
+vi.mock('components/elements/hit/HitLinks', () => ({
+    default: ({ analytic, dossiers }) => (_jsxs("div", { children: ["links:", analytic?.analytic_id, ":", dossiers.length] }))
+}));
+vi.mock('components/elements/hit/HitOverview', () => ({
+    default: () => _jsx("div", { children: "overview-content" })
+}));
+vi.mock('components/elements/ObjectDetails', () => ({
+    default: () => _jsx("div", { children: "details-content" })
+}));
+vi.mock('components/elements/display/json/JSONViewer', () => ({
+    default: ({ data }) => _jsx("div", { id: "json-content", children: JSON.stringify(data) })
+}));
+vi.mock('components/elements/record/RecordComments', () => ({
+    default: () => _jsx("div", { children: "comments-content" })
+}));
+vi.mock('components/elements/record/RecordWorklog', () => ({
+    default: () => _jsx("div", { children: "worklog-content" })
+}));
+vi.mock('components/elements/record/RecordRelated', () => ({
+    default: () => _jsx("div", { children: "related-content" })
+}));
+vi.mock('./LeadRenderer', () => ({
+    default: ({ lead }) => _jsxs("div", { children: ["lead-content:", lead.label.en] })
+}));
+import HitViewer, { Orientation } from './HitViewer';
+const hit = {
+    __index: 'hit',
+    timestamp: '2026-01-01T00:00:00Z',
+    howler: {
+        id: 'hit-1',
+        analytic: 'analytic-1',
+        assignment: 'analyst',
+        hash: 'hash-1',
+        data: ['{"source":"data"}'],
+        dossier: [
+            {
+                label: { en: 'Local lead', fr: 'Piste locale' },
+                format: 'markdown',
+                content: 'local'
+            }
+        ],
+        comment: [{}]
+    }
+};
+const recordContextValue = {
+    records: { 'hit-1': hit },
+    getRecord: mockGetHit
+};
+const createWrapper = () => {
+    const Wrapper = ({ children }) => (_jsx(SocketContext.Provider, { value: {
+            emit: mockEmit,
+            open: mockOpen.current,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            status: 1,
+            reconnect: vi.fn(),
+            viewers: {},
+            fetchViewers: vi.fn()
+        }, children: _jsx(RecordContext.Provider, { value: recordContextValue, children: children }) }));
+    return Wrapper;
+};
+const renderViewer = () => render(_jsx(HitViewer, {}), { wrapper: createWrapper() });
+beforeEach(() => {
+    mockEmit.mockReset();
+    mockExecutePlugin.mockReset();
+    mockOpen.current = true;
+    mockParams.id = 'hit-1';
+    mockUseMediaQuery.mockReset().mockReturnValue(false);
+    mockSetOrientation.mockReset();
+    mockGetHit.mockReset().mockResolvedValue(undefined);
+    mockGetMatchingAnalytic.mockReset().mockResolvedValue(undefined);
+    mockGetMatchingDossiers.mockReset().mockResolvedValue([]);
+    mockGetMatchingOverview.mockReset().mockResolvedValue(undefined);
+    mockNavigate.mockReset();
+    recordContextValue.records = { 'hit-1': hit };
+});
+describe('HitViewer', () => {
+    it('loads a missing hit and shows the loading state', async () => {
+        recordContextValue.records = {};
+        renderViewer();
+        expect(screen.queryByText('details-content')).not.toBeInTheDocument();
+        await waitFor(() => expect(mockGetHit).toHaveBeenCalledWith('hit-1', true));
+    });
+    it('navigates to the not-found page when loading fails with a 404', async () => {
+        recordContextValue.records = {};
+        mockGetHit.mockRejectedValue({ cause: { api_status_code: 404 } });
+        renderViewer();
+        await waitFor(() => expect(mockNavigate).toHaveBeenCalledWith('/404'));
+    });
+    it('fetches matching data, notifies plugins, and renders the details view', async () => {
+        const analytic = { analytic_id: 'analytic-1' };
+        const dossiers = [{ leads: [] }];
+        mockGetMatchingAnalytic.mockResolvedValue(analytic);
+        mockGetMatchingDossiers.mockResolvedValue(dossiers);
+        renderViewer();
+        await waitFor(() => {
+            expect(mockGetMatchingAnalytic).toHaveBeenCalledWith(hit);
+            expect(mockGetMatchingDossiers).toHaveBeenCalledWith(hit);
+            expect(screen.getByText('links:analytic-1:1')).toBeInTheDocument();
+        });
+        expect(screen.getByText('details-content')).toBeInTheDocument();
+        expect(mockExecutePlugin).toHaveBeenCalledTimes(1);
+        expect(mockExecutePlugin).toHaveBeenCalledWith('test-plugin.on', 'viewing');
+    });
+    it('emits viewing and stop_viewing socket events', async () => {
+        const { unmount } = renderViewer();
+        await waitFor(() => {
+            expect(mockEmit).toHaveBeenCalledWith({
+                broadcast: false,
+                action: 'viewing',
+                id: 'hit-1'
+            });
+        });
+        mockEmit.mockClear();
+        unmount();
+        expect(mockEmit).toHaveBeenCalledWith({
+            broadcast: false,
+            action: 'stop_viewing',
+            id: 'hit-1'
+        });
+    });
+    it('does not emit socket events when the socket is closed or no hit id is present', async () => {
+        mockOpen.current = false;
+        renderViewer();
+        await waitFor(() => expect(mockGetMatchingOverview).toHaveBeenCalledWith(hit));
+        expect(mockEmit).not.toHaveBeenCalled();
+        mockParams.id = undefined;
+        renderViewer();
+        expect(mockEmit).not.toHaveBeenCalled();
+    });
+    it('opens an overview by default and lets the analyst select all content tabs', async () => {
+        const user = userEvent.setup();
+        mockGetMatchingOverview.mockResolvedValue({ content: 'overview' });
+        mockGetMatchingDossiers.mockResolvedValue([
+            {
+                leads: [
+                    {
+                        label: { en: 'External lead', fr: 'Piste externe' },
+                        format: 'markdown',
+                        content: 'external'
+                    }
+                ]
+            }
+        ]);
+        renderViewer();
+        await screen.findByText('overview-content');
+        await user.click(screen.getByRole('tab', { name: 'hit.viewer.details' }));
+        expect(screen.getByText('details-content')).toBeInTheDocument();
+        await user.click(screen.getByRole('tab', { name: 'Local lead' }));
+        expect(screen.getByText('lead-content:Local lead')).toBeInTheDocument();
+        await user.click(screen.getByRole('tab', { name: 'External lead' }));
+        expect(screen.getByText('lead-content:External lead')).toBeInTheDocument();
+        const tabs = screen.getAllByRole('tab');
+        await user.click(tabs.at(-5));
+        expect(screen.getByTestId('json-content')).toHaveTextContent(JSON.stringify(['parsed:{"source":"data"}']));
+        await user.click(tabs.at(-4));
+        expect(screen.getByTestId('json-content')).toHaveTextContent(JSON.stringify(hit));
+        await user.click(tabs.at(-3));
+        expect(screen.getByText('comments-content')).toBeInTheDocument();
+        await user.click(tabs.at(-2));
+        expect(screen.getByText('worklog-content')).toBeInTheDocument();
+        await user.click(tabs.at(-1));
+        expect(screen.getByText('related-content')).toBeInTheDocument();
+    });
+    it('toggles the desktop layout and navigates to its matching analytic', async () => {
+        const user = userEvent.setup();
+        mockGetMatchingAnalytic.mockResolvedValue({ analytic_id: 'analytic-1' });
+        renderViewer();
+        await screen.findByText('links:analytic-1:0');
+        const buttons = screen.getAllByRole('button');
+        await user.click(buttons[0]);
+        expect(mockSetOrientation).toHaveBeenCalledWith(Orientation.HORIZONTAL);
+        await user.click(buttons[1]);
+        expect(mockNavigate).toHaveBeenCalledWith('/analytics/analytic-1');
+    });
+    it('forces a horizontal layout below the large breakpoint', async () => {
+        mockUseMediaQuery.mockReturnValue(true);
+        renderViewer();
+        await waitFor(() => expect(mockSetOrientation).toHaveBeenCalledWith(Orientation.HORIZONTAL));
+    });
+});

package/package.json

@@ -93,7 +93,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",