@cccsaurora/howler-ui 2.18.0 → 2.19.0-cases.1040

package/components/routes/hits/search/shared/CustomSpan.test.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+vi.mock('use-context-selector', async () => {
+    const actual = await vi.importActual('use-context-selector');
+    return {
+        ...actual,
+        createContext,
+        useContextSelector: (_context, selector) => selector(useContext(_context))
+    };
+});
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+import { render, screen, waitFor } from '@testing-library/react';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import dayjs from 'dayjs';
+import minMax from 'dayjs/plugin/minMax';
+import {} from 'react';
+dayjs.extend(minMax);
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+// Import after mocks
+import CustomSpan from './CustomSpan';
+const mockSetCustomSpan = vi.fn();
+const defaultCtx = {
+    span: 'date.range.custom',
+    startDate: undefined,
+    endDate: undefined,
+    setCustomSpan: mockSetCustomSpan
+};
+const makeWrapper = (ctx) => function ({ children }) {
+    return (_jsx(ParameterContext.Provider, { value: { ...defaultCtx, ...ctx }, children: children }));
+};
+describe('CustomSpan', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('useEffect – date initialisation', () => {
+        it('should set both dates to defaults when both are null', async () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: undefined, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            const startDate = dayjs(start);
+            const endDate = dayjs(end);
+            expect(startDate.isBefore(endDate)).toBe(true);
+            expect(dayjs().diff(startDate, 'hour')).toBeGreaterThanOrEqual(47);
+            expect(dayjs().diff(startDate, 'hour')).toBeLessThanOrEqual(49);
+            expect(dayjs().diff(endDate, 'hour')).toBeGreaterThanOrEqual(23);
+            expect(dayjs().diff(endDate, 'hour')).toBeLessThanOrEqual(25);
+        });
+        it('should set default start date when only endDate is provided', async () => {
+            // Use a recent end date that's after the default start (now - 2 days)
+            const existingEnd = dayjs().subtract(1, 'hour').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: undefined, endDate: existingEnd })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(end).toBe(existingEnd);
+            expect(dayjs(start).isBefore(dayjs(end))).toBe(true);
+        });
+        it('should set default end date when only startDate is provided', async () => {
+            // Use a recent start date that's before the default end (now - 1 day)
+            const existingStart = dayjs().subtract(3, 'day').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: existingStart, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(start).toBe(existingStart);
+            expect(dayjs(end).isAfter(dayjs(start))).toBe(true);
+        });
+        it('should NOT call setCustomSpan when both dates are already set', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should NOT call setCustomSpan when span is not custom', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.1.month', startDate: undefined, endDate: undefined })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should NOT call setCustomSpan when span is undefined', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: undefined, startDate: undefined, endDate: undefined })
+            });
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should ensure startDate is before endDate even if existing startDate is after default endDate', async () => {
+            const futureStart = dayjs().add(1, 'hour').toISOString();
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.custom', startDate: futureStart, endDate: undefined })
+            });
+            await waitFor(() => expect(mockSetCustomSpan).toHaveBeenCalledOnce());
+            const [start, end] = mockSetCustomSpan.mock.calls[0];
+            expect(dayjs(start).isBefore(dayjs(end))).toBe(true);
+        });
+    });
+    describe('rendering', () => {
+        it('should render nothing when span is not custom', () => {
+            const { container } = render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: 'date.range.1.month' })
+            });
+            expect(container.innerHTML).toBe('');
+        });
+        it('should render nothing when span is undefined', () => {
+            const { container } = render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({ span: undefined })
+            });
+            expect(container.innerHTML).toBe('');
+        });
+        it('should render two date pickers when span is custom', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(screen.getByLabelText('date.select.start')).toBeInTheDocument();
+            expect(screen.getByLabelText('date.select.end')).toBeInTheDocument();
+        });
+        it('should render pickers for any span ending with "custom"', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'my.prefix.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            expect(screen.getByLabelText('date.select.start')).toBeInTheDocument();
+            expect(screen.getByLabelText('date.select.end')).toBeInTheDocument();
+        });
+    });
+    describe('onChange handlers', () => {
+        it('should not call setCustomSpan when both dates are present on render', () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: dayjs().subtract(3, 'day').toISOString(),
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            const startPicker = screen.getByLabelText('date.select.start');
+            expect(startPicker).toBeInTheDocument();
+            expect(mockSetCustomSpan).not.toHaveBeenCalled();
+        });
+        it('should render start picker with fallback value when startDate is null', async () => {
+            render(_jsx(CustomSpan, {}), {
+                wrapper: makeWrapper({
+                    span: 'date.range.custom',
+                    startDate: undefined,
+                    endDate: dayjs().subtract(1, 'hour').toISOString()
+                })
+            });
+            // When startDate is null, the picker's value falls back to dayjs().subtract(1, 'days')
+            const startInput = screen.getByLabelText('date.select.start');
+            expect(startInput).toBeInTheDocument();
+            // The input should have a value (the fallback), not be empty
+            expect(startInput.value).not.toBe('');
+        });
+    });
+});

package/components/routes/hits/search/shared/IndexPicker.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").NamedExoticComponent<{}>;
+export default _default;

package/components/routes/hits/search/shared/IndexPicker.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FilterList } from '@mui/icons-material';
+import { Autocomplete, TextField } from '@mui/material';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const FILTER_OPTIONS = [
+    { label: 'hit.search.index.hit', value: 'hit' },
+    { label: 'hit.search.index.observable', value: 'observable' }
+];
+const IndexPicker = () => {
+    const { t } = useTranslation();
+    const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
+    const setIndexes = useContextSelector(ParameterContext, ctx => ctx.setIndexes);
+    const selectedOptions = FILTER_OPTIONS.filter(opt => indexes.includes(opt.value));
+    return (_jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: selectedOptions.map(opt => t(opt.label)).join(', '), minWidth: "225px", slotProps: { chip: { size: 'small' } }, children: _jsx(Autocomplete, { size: "small", multiple: true, options: FILTER_OPTIONS, value: selectedOptions, onChange: (_ev, values) => values.length > 0 && setIndexes(values.map(val => val.value)), isOptionEqualToValue: (opt, val) => opt.value === val.value, getOptionLabel: opt => t(opt.label), renderInput: params => _jsx(TextField, { ...params }) }) }));
+};
+export default memo(IndexPicker);

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

@@ -4,23 +4,22 @@ import { Code, Comment, DataObject, History, LinkSharp, QueryStats, ViewAgenda }
 import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
-import BundleButton from '@cccsaurora/howler-ui/components/elements/display/icons/BundleButton';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
 import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
 import HitActions from '@cccsaurora/howler-ui/components/elements/hit/HitActions';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
-import HitComments from '@cccsaurora/howler-ui/components/elements/hit/HitComments';
-import HitDetails from '@cccsaurora/howler-ui/components/elements/hit/HitDetails';
 import HitLabels from '@cccsaurora/howler-ui/components/elements/hit/HitLabels';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import HitLinks from '@cccsaurora/howler-ui/components/elements/hit/HitLinks';
 import HitOutline from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
 import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
-import HitRelated from '@cccsaurora/howler-ui/components/elements/hit/HitRelated';
-import HitWorklog from '@cccsaurora/howler-ui/components/elements/hit/HitWorklog';
+import ObjectDetails from '@cccsaurora/howler-ui/components/elements/ObjectDetails';
+import RecordComments from '@cccsaurora/howler-ui/components/elements/record/RecordComments';
+import RecordRelated from '@cccsaurora/howler-ui/components/elements/record/RecordRelated';
+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';
@@ -44,8 +43,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 getHit = useContextSelector(HitContext, ctx => ctx.getHit);
-    const hit = useContextSelector(HitContext, ctx => ctx.hits[params.id]);
+    const getHit = useContextSelector(RecordContext, ctx => ctx.getRecord);
+    const hit = useContextSelector(RecordContext, ctx => ctx.records[params.id]);
     const [userIds, setUserIds] = useState(new Set());
     const users = useMyUserList(userIds);
     const [tab, setTab] = useState('details');
@@ -94,12 +93,12 @@ const HitViewer = () => {
         }
         return {
             overview: () => _jsx(HitOverview, { hit: hit }),
-            details: () => _jsx(HitDetails, { hit: hit }),
-            hit_comments: () => _jsx(HitComments, { hit: hit, users: users }),
+            details: () => _jsx(ObjectDetails, { obj: hit }),
+            hit_comments: () => _jsx(RecordComments, { record: hit, users: users }),
             hit_raw: () => _jsx(JSONViewer, { data: hit }),
             hit_data: () => _jsx(JSONViewer, { data: hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false }),
-            hit_worklog: () => _jsx(HitWorklog, { hit: hit, users: users }),
-            hit_related: () => _jsx(HitRelated, { hit: hit }),
+            hit_worklog: () => _jsx(RecordWorklog, { record: hit, users: users }),
+            hit_related: () => _jsx(RecordRelated, { record: hit }),
             ...Object.fromEntries(hit?.howler.dossier?.map((lead, index) => ['lead:' + index, () => _jsx(LeadRenderer, { lead: lead, hit: hit })]) ?? []),
             ...Object.fromEntries(dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => [
                 `external-lead:${dossierIndex}:${leadIndex}`,
@@ -132,7 +131,7 @@ const HitViewer = () => {
                                 position: 'absolute',
                                 top: theme.spacing(2),
                                 right: theme.spacing(-6)
-                            }, children: [_jsx(Tooltip, { title: t('hit.panel.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('hit.panel.analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles })] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                            }, children: [_jsx(Tooltip, { title: t('hit.panel.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) }))] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
                             // eslint-disable-next-line react/no-array-index-key
                             , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
                             // eslint-disable-next-line react/no-array-index-key

package/components/routes/home/AddNewCard.js

@@ -64,7 +64,7 @@ const AddNewCard = ({ dashboard, addCard }) => {
         fetchAllAnalytics();
     }, []);
     const filteredAnalyticVisualizations = useMemo(() => {
-        const existingAnalyticCards = dashboard.filter(_card => _card.type === "analytic");
+        const existingAnalyticCards = dashboard.filter(_card => _card.type === 'analytic');
         return VISUALIZATIONS.filter(viz => {
             return !existingAnalyticCards.some(_card => {
                 const parsedConfig = JSON.parse(_card.config);

package/components/routes/home/AddNewCard.test.d.ts

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

package/components/routes/home/AddNewCard.test.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen, waitFor } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { setupContextSelectorMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import AddNewCard from './AddNewCard';
+setupContextSelectorMock();
+const mockApiSearchAnalyticPost = vi.fn();
+vi.mock('api', () => ({
+    default: {
+        search: {
+            analytic: {
+                post: (...args) => mockApiSearchAnalyticPost(...args)
+            }
+        }
+    }
+}));
+vi.mock('components/elements/addons/buttons/CustomButton', () => ({
+    default: ({ children, disabled, onClick, ...props }) => (_jsx("button", { disabled: disabled, onClick: onClick, ...props, children: children }))
+}));
+const mockFetchViews = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
+vi.mock('components/app/providers/ViewProvider', () => ({
+    ViewContext: React.createContext({
+        views: {
+            'view-1': {
+                view_id: 'view-1',
+                title: 'My View',
+                query: 'howler.status:open',
+                sort: 'event.created desc',
+                span: 'date.range.1.month',
+                type: 'personal',
+                owner: 'testuser',
+                settings: { advance_on_triage: false }
+            },
+            'view-2': {
+                view_id: 'view-2',
+                title: 'Second View',
+                query: 'howler.status:open',
+                sort: 'event.created desc',
+                span: 'date.range.1.month',
+                type: 'personal',
+                owner: 'testuser',
+                settings: { advance_on_triage: false }
+            }
+        },
+        fetchViews: mockFetchViews
+    })
+}));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('AddNewCard', () => {
+    const mockAddCard = vi.fn();
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockApiSearchAnalyticPost.mockResolvedValue({
+            items: [{ analytic_id: 'analytic-1', name: 'Test Analytic', description: 'Test description' }],
+            total: 1
+        });
+    });
+    it('should render the add card title', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByText('Add New Panel')).toBeInTheDocument();
+        });
+    });
+    it('should render the description', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByText(/Add an additional panel/)).toBeInTheDocument();
+        });
+    });
+    it('should have the create button disabled initially', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(screen.getByRole('button', { name: /Create/i })).toBeDisabled();
+        });
+    });
+    it('should fetch analytics on mount', async () => {
+        render(_jsx(AddNewCard, { dashboard: [], addCard: mockAddCard }), { wrapper: Wrapper });
+        await waitFor(() => {
+            expect(mockApiSearchAnalyticPost).toHaveBeenCalledWith(expect.objectContaining({ query: '*:*' }));
+        });
+    });
+});

package/components/routes/home/ViewCard.js

@@ -3,74 +3,80 @@ import { OpenInNew } from '@mui/icons-material';
 import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import { useHitContextSelector } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { useRecordContextSelector } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import ObservableCard from '@cccsaurora/howler-ui/components/elements/observable/ObservableCard';
+import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import HitContextMenu from '@cccsaurora/howler-ui/components/routes/hits/search/HitContextMenu';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
+import { isObservable } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
-// Custom hook to select hits by IDs with proper memoization
-const useSelectHitsByIds = (hitIds) => {
-    const hitIdsRef = useRef(hitIds);
+// Custom hook to select records by IDs with proper memoization
+const useSelectRecordsByIds = (recordIds) => {
+    const recordIdsRef = useRef(recordIds);
     const prevResultRef = useRef([]);
-    const prevHitIdsRef = useRef([]);
-    // Keep ref up to date with latest hitIds
-    hitIdsRef.current = hitIds;
+    const prevRecordIdsRef = useRef([]);
+    // Keep ref up to date with latest recordIds
+    recordIdsRef.current = recordIds;
     const selector = useCallback(ctx => {
-        const currentHitIds = hitIdsRef.current;
-        // Fast path: if hitIds array didn't change, check if hit objects changed
-        if (prevHitIdsRef.current.length === currentHitIds.length &&
-            currentHitIds.every((id, i) => id === prevHitIdsRef.current[i])) {
-            // HitIds unchanged - check if any hit objects changed by reference
-            const anyHitChanged = currentHitIds.some((id, i) => ctx.hits[id] !== prevResultRef.current[i]);
-            if (!anyHitChanged) {
+        const currentRecordIds = recordIdsRef.current;
+        // Fast path: if recordIds array didn't change, check if record objects changed
+        if (prevRecordIdsRef.current.length === currentRecordIds.length &&
+            currentRecordIds.every((id, i) => id === prevRecordIdsRef.current[i])) {
+            // RecordIds unchanged - check if any record objects changed by reference
+            const anyRecordChanged = currentRecordIds.some((id, i) => ctx.records[id] !== prevResultRef.current[i]);
+            if (!anyRecordChanged) {
                 return prevResultRef.current;
             }
         }
         // Something changed - rebuild the array
-        const currentHits = currentHitIds.map(id => ctx.hits[id]).filter(Boolean);
-        prevHitIdsRef.current = currentHitIds;
-        prevResultRef.current = currentHits;
-        return currentHits;
+        const currentRecords = currentRecordIds.map(id => ctx.records[id]).filter(Boolean);
+        prevRecordIdsRef.current = currentRecordIds;
+        prevResultRef.current = currentRecords;
+        return currentRecords;
     }, []); // Empty deps - selector never changes
-    return useHitContextSelector(selector);
+    return useRecordContextSelector(selector);
 };
 // Utility functions
 const normalize = (val) => (val == null ? '' : String(val));
 // Have to normalize the fields as websockets and api return null and undefined respectively. This causes false positives when comparing signatures if not normalized to a consistent value. We also stringify non-primitive values to ensure changes are detected.
-const createHitSignature = (hit) => {
-    if (!hit)
+const createRecordSignature = (record) => {
+    if (!record) {
         return '';
-    return `${hit.howler?.id}:${normalize(hit.howler?.status)}:${normalize(hit.howler?.assignment)}:${normalize(hit.howler?.assessment)}`;
+    }
+    if (isObservable(record)) {
+        return record.howler?.id;
+    }
+    return `${record.howler?.id}:${normalize(record.howler?.status)}:${normalize(record.howler?.assignment)}:${normalize(record.howler?.assessment)}`;
 };
-const createSignatureFromHits = (hits) => {
-    if (hits.length === 0)
+const createSignatureFromRecords = (records) => {
+    if (records.length === 0)
         return '';
-    return hits.map(createHitSignature).join('|');
+    return records.map(createRecordSignature).join('|');
 };
 const DEBOUNCE_TIME = 1000; // 1 second debounce for signature changes
 const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     const navigate = useNavigate();
     const { t } = useTranslation();
     const { dispatchApi } = useMyApi();
-    const [hitIds, setHitIds] = useState([]);
+    const [recordIds, setRecordIds] = useState([]);
     const [loading, setLoading] = useState(false);
     const debounceTimerRef = useRef(null);
     const isRefreshing = useRef(false);
     const lastSignature = useRef('');
     const view = useContextSelector(ViewContext, ctx => ctx.views[viewId]);
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
-    const loadHits = useHitContextSelector(ctx => ctx.loadHits);
+    const loadRecords = useRecordContextSelector(ctx => ctx.loadRecords);
     // Subscribe to hits from HitProvider cache based on current hitIds in the view
     // Uses memoized selector to avoid unnecessary re-renders on unrelated hit updates
-    const hits = useSelectHitsByIds(hitIds);
+    const records = useSelectRecordsByIds(recordIds);
     // Create a stable signature that only changes when relevant fields change
-    const hitsSignature = useMemo(() => createSignatureFromHits(hits), [hits]);
+    const recordsSignature = useMemo(() => createSignatureFromRecords(records), [records]);
     const refreshView = useCallback(async () => {
         if (!view?.query || isRefreshing.current) {
             onRefreshComplete?.();
@@ -78,21 +84,21 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         }
         isRefreshing.current = true;
         try {
-            const res = await dispatchApi(api.search.hit.post({
+            const res = await dispatchApi(api.v2.search.post(view.indexes, {
                 query: view.query,
                 rows: limit,
                 metadata: ['analytic']
             }));
-            const fetchedHits = res.items ?? [];
-            loadHits(fetchedHits);
-            setHitIds(fetchedHits.map(h => h.howler.id));
-            lastSignature.current = createSignatureFromHits(fetchedHits);
+            const fetchedRecords = res.items ?? [];
+            loadRecords(fetchedRecords);
+            setRecordIds(fetchedRecords.map(r => r.howler.id));
+            lastSignature.current = createSignatureFromRecords(fetchedRecords);
         }
         finally {
             isRefreshing.current = false;
             onRefreshComplete?.();
         }
-    }, [dispatchApi, limit, view?.query, loadHits, onRefreshComplete]);
+    }, [dispatchApi, limit, view?.query, view?.indexes, loadRecords, onRefreshComplete]);
     const debouncedRefresh = useCallback(() => {
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
@@ -125,16 +131,16 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     }, [view?.query, limit, refreshView]);
     // Monitor hits currently in the view for changes that might affect query results
     useEffect(() => {
-        if (!hitsSignature || hitIds.length === 0 || !lastSignature.current) {
-            lastSignature.current = hitsSignature;
+        if (!recordsSignature || recordIds.length === 0 || !lastSignature.current) {
+            lastSignature.current = recordsSignature;
             return;
         }
         // Check if signature actually changed
-        if (lastSignature.current === hitsSignature) {
+        if (lastSignature.current === recordsSignature) {
             return;
         }
         debouncedRefresh();
-    }, [hitsSignature, hitIds, debouncedRefresh]);
+    }, [recordsSignature, recordIds, debouncedRefresh]);
     useEffect(() => {
         return () => {
             if (debounceTimerRef.current) {
@@ -151,6 +157,6 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         }
         return selectedElement.id;
     }, []);
-    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : hits.length > 0 ? (_jsx(HitContextMenu, { getSelectedId: getSelectedId, children: hits.map(h => (_jsx(Card, { id: h.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate((h.howler.is_bundle ? '/bundles/' : '/hits/') + h.howler.id), children: _jsx(CardContent, { children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: h }) }) }, h.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : records.length > 0 ? (_jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: records.map((r) => (_jsx(Card, { id: r.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate(`/hits/${r.howler.id}`), children: _jsx(CardContent, { children: r.__index == 'hit' ? (_jsx(HitBanner, { layout: HitLayout.DENSE, hit: r })) : (_jsx(ObservableCard, { observable: r })) }) }, r.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
 };
 export default ViewCard;

package/components/routes/home/ViewRefresh.test.d.ts

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

package/components/routes/home/ViewRefresh.test.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, render, screen } from '@testing-library/react';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import React from 'react';
+import { I18nextProvider } from 'react-i18next';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import ViewRefresh, {} from './ViewRefresh';
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+describe('ViewRefresh', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('should render the refresh button', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+    it('should show a progress indicator initially', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+    it('should trigger refresh when progress reaches 100%', async () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        // Progress increments by 1 every refreshRate*10ms = 300ms.
+        // Each increment triggers a re-render and a new setTimeout.
+        // We advance one tick at a time inside act to let React process each state update.
+        for (let i = 0; i < 101; i++) {
+            await act(async () => {
+                vi.advanceTimersByTime(300);
+            });
+        }
+        expect(onRefresh).toHaveBeenCalled();
+    });
+    it('should clear refreshing state when all cards report back via ref', async () => {
+        const onRefresh = vi.fn();
+        const ref = React.createRef();
+        render(_jsx(ViewRefresh, { ref: ref, refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        // Advance to 100% to trigger refresh
+        for (let i = 0; i < 101; i++) {
+            await act(async () => {
+                vi.advanceTimersByTime(300);
+            });
+        }
+        expect(onRefresh).toHaveBeenCalled();
+        // Simulate both cards completing
+        act(() => {
+            ref.current?.handleRefreshComplete();
+            ref.current?.handleRefreshComplete();
+        });
+        // After all cards complete, the progress should reset (button re-enabled)
+        expect(screen.getByRole('button')).not.toBeDisabled();
+    });
+    it('should trigger refresh via manual click', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 2, onRefresh: onRefresh }), { wrapper: Wrapper });
+        // Click the refresh button directly using fireEvent (avoids userEvent timer issues)
+        const button = screen.getByRole('button');
+        act(() => {
+            button.click();
+        });
+        expect(onRefresh).toHaveBeenCalled();
+    });
+    it('should not call onRefresh when viewCardCount is 0 and button is clicked', () => {
+        const onRefresh = vi.fn();
+        render(_jsx(ViewRefresh, { refreshRate: 30, viewCardCount: 0, onRefresh: onRefresh }), { wrapper: Wrapper });
+        const button = screen.getByRole('button');
+        act(() => {
+            button.click();
+        });
+        // onRefresh should not be called because viewCardCount is 0
+        expect(onRefresh).not.toHaveBeenCalled();
+    });
+});

package/components/routes/observables/ObservableViewer.d.ts

@@ -0,0 +1,7 @@
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import { type FC } from 'react';
+declare const ObservableViewer: FC<{
+    observable?: Observable;
+    observableId?: string;
+}>;
+export default ObservableViewer;