@cccsaurora/howler-ui 3.1.0-dev.1655 → 3.1.0-dev.1657

package/components/hooks/useMyChart.test.d.ts

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

package/components/hooks/useMyChart.test.js

@@ -0,0 +1,62 @@
+/// <reference types="vitest" />
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockRegister = vi.hoisted(() => vi.fn());
+vi.mock('@mui/material', () => ({
+    useTheme: () => ({
+        palette: {
+            text: { primary: '#111111', secondary: '#999999' }
+        }
+    })
+}));
+vi.mock('chart.js', () => {
+    const token = {};
+    return {
+        ArcElement: token,
+        BarElement: token,
+        CategoryScale: token,
+        Filler: token,
+        Legend: token,
+        LinearScale: token,
+        LineElement: token,
+        PointElement: token,
+        SubTitle: token,
+        TimeScale: token,
+        Title: token,
+        Tooltip: token,
+        Chart: {
+            defaults: { font: {} },
+            register: mockRegister
+        }
+    };
+});
+vi.mock('chartjs-plugin-zoom', () => ({
+    default: { id: 'zoom' }
+}));
+vi.mock('chartjs-adapter-dayjs-4', () => ({}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => `translated:${key}` })
+}));
+import useMyChart from './useMyChart';
+describe('useMyChart', () => {
+    it('registers chart primitives and builds line options', () => {
+        const { result } = renderHook(() => useMyChart());
+        const line = result.current.line('title.key', 'subtitle.key');
+        expect(mockRegister).toHaveBeenCalled();
+        expect(line.plugins.title.text).toBe('translated:title.key');
+        expect(line.plugins.zoom.pan.mode).toBe('x');
+        expect(line.plugins).not.toHaveProperty('subtitle');
+        expect(line.scales.x.type).toBe('time');
+    });
+    it('builds doughnut, bar, and scatter options', () => {
+        const { result } = renderHook(() => useMyChart());
+        const doughnut = result.current.doughnut('doughnut.title');
+        const bar = result.current.bar('bar.title');
+        const scatter = result.current.scatter('scatter.title', 'scatter.subtitle');
+        expect(doughnut).not.toHaveProperty('scales');
+        expect(doughnut.plugins.subtitle.text).toBe('translated:route.analytics.overview.limit');
+        expect(bar.plugins.legend).toEqual({ display: false });
+        expect(bar.scales.y.ticks).toEqual({ precision: 0, color: '#111111' });
+        expect(scatter.plugins.subtitle.text).toBe('translated:scatter.subtitle');
+    });
+});

package/components/hooks/useMySearch.test.d.ts

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

package/components/hooks/useMySearch.test.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, render, renderHook, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockNavigate = vi.hoisted(() => vi.fn());
+const mockSearchPost = vi.hoisted(() => vi.fn());
+vi.mock('@mui/material', () => ({
+    Alert: ({ children }) => _jsx("div", { children: children }),
+    Box: ({ children }) => _jsx("div", { children: children }),
+    Typography: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('api', () => ({
+    default: {
+        search: {
+            hit: {
+                post: mockSearchPost
+            }
+        }
+    }
+}));
+vi.mock('components/elements/hit/HitPreview', () => ({
+    default: ({ hit }) => _jsx("div", { children: hit.howler.id })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    Link: ({ children, to }) => _jsx("a", { href: to, children: children }),
+    useNavigate: () => mockNavigate
+}));
+vi.mock('./useMyLocalStorage', () => ({
+    useMyLocalStorageItem: () => [25]
+}));
+import useMySearch from './useMySearch';
+describe('useMySearch', () => {
+    beforeEach(() => {
+        mockNavigate.mockReset();
+        mockSearchPost.mockReset();
+    });
+    it('searches hits and maps results into quick-search items', async () => {
+        mockSearchPost.mockResolvedValue({
+            items: [{ howler: { id: 'hit-1' } }, { howler: { id: 'hit-2' } }]
+        });
+        const set = vi.fn();
+        const state = { items: [], set, searching: false };
+        const { result } = renderHook(() => useMySearch());
+        await result.current.onEnter('alpha/beta', state);
+        expect(mockSearchPost).toHaveBeenCalledWith({
+            offset: 0,
+            rows: 25,
+            query: 'howler.assignment:*alpha\\/beta* OR howler.analytic:*alpha\\/beta* OR howler.detection:*alpha\\/beta* OR howler.status:*alpha\\/beta*'
+        });
+        expect(set).toHaveBeenLastCalledWith({
+            ...state,
+            searching: false,
+            items: [
+                { id: 'hit-1', item: { howler: { id: 'hit-1' } } },
+                { id: 'hit-2', item: { howler: { id: 'hit-2' } } }
+            ]
+        });
+    });
+    it('handles missing state, empty responses, and thrown errors', async () => {
+        const { result } = renderHook(() => useMySearch());
+        await expect(result.current.onEnter('ignored')).resolves.toBeUndefined();
+        const set = vi.fn();
+        const state = { items: [{ id: 'x' }], set, searching: false };
+        mockSearchPost.mockResolvedValueOnce(null);
+        await act(async () => {
+            await result.current.onEnter('bad', state);
+        });
+        expect(set).toHaveBeenLastCalledWith({ ...state, searching: false, items: [] });
+        mockSearchPost.mockRejectedValueOnce(new Error('boom'));
+        await act(async () => {
+            await result.current.onEnter('bad', state);
+        });
+        expect(set).toHaveBeenLastCalledWith({ ...state, searching: false, items: [] });
+    });
+    it('renders quick-search header states, item links, and navigates on selection', async () => {
+        const { result, rerender } = renderHook(() => useMySearch());
+        render(result.current.headerRenderer({ items: undefined, searching: false, set: vi.fn() }));
+        expect(screen.getByText('hit.quicksearch')).toBeInTheDocument();
+        const set = vi.fn();
+        mockSearchPost.mockResolvedValueOnce(null);
+        await act(async () => {
+            await result.current.onEnter('broken', { items: [], searching: false, set });
+        });
+        rerender();
+        render(result.current.headerRenderer({ items: [], searching: false, set }));
+        expect(screen.getByText('hit.search.invalid')).toBeInTheDocument();
+        render(result.current.itemRenderer({ id: 'hit-9', item: { howler: { id: 'hit-9' } } }));
+        expect(screen.getByRole('link')).toHaveAttribute('href', '/hits/hit-9');
+        expect(screen.getByText('hit-9')).toBeInTheDocument();
+        result.current.onItemSelect({ item: { howler: { id: 'hit-9' } } });
+        expect(mockNavigate).toHaveBeenCalledWith('/hits/hit-9');
+    });
+});

package/components/hooks/useMySnackbar.test.d.ts

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

package/components/hooks/useMySnackbar.test.js

@@ -0,0 +1,36 @@
+/// <reference types="vitest" />
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const mockEnqueueSnackbar = vi.hoisted(() => vi.fn());
+const mockCloseSnackbar = vi.hoisted(() => vi.fn());
+vi.mock('notistack', () => ({
+    useSnackbar: () => ({
+        enqueueSnackbar: mockEnqueueSnackbar,
+        closeSnackbar: mockCloseSnackbar
+    })
+}));
+import useMySnackbar from './useMySnackbar';
+describe('useMySnackbar', () => {
+    it('enqueues typed snackbar messages with default options', () => {
+        const { result } = renderHook(() => useMySnackbar());
+        result.current.showSuccessMessage('saved');
+        result.current.showWarningMessage('warn', 2000);
+        result.current.showErrorMessage('error');
+        result.current.showInfoMessage('info');
+        expect(mockEnqueueSnackbar).toHaveBeenCalledWith('saved', expect.objectContaining({
+            variant: 'success',
+            autoHideDuration: 5000,
+            preventDuplicate: true
+        }));
+        expect(mockEnqueueSnackbar).toHaveBeenCalledWith('warn', expect.objectContaining({ variant: 'warning', autoHideDuration: 2000 }));
+    });
+    it('merges custom snackbar click handlers with the default close handler', () => {
+        const { result } = renderHook(() => useMySnackbar());
+        const onClick = vi.fn();
+        result.current.showInfoMessage('custom', 1000, { SnackbarProps: { onClick } });
+        const options = mockEnqueueSnackbar.mock.calls.at(-1)[1];
+        options.SnackbarProps.onClick('event');
+        expect(onClick).toHaveBeenCalledWith('event');
+        expect(mockCloseSnackbar).toHaveBeenCalled();
+    });
+});

package/components/hooks/useMyUserFunctions.test.d.ts

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

package/components/hooks/useMyUserFunctions.test.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockDispatchApi = vi.hoisted(() => vi.fn());
+const mockShowSuccessMessage = vi.hoisted(() => vi.fn());
+const mockShowWarningMessage = vi.hoisted(() => vi.fn());
+const mockNavigate = vi.hoisted(() => vi.fn());
+const mockSetUser = vi.hoisted(() => vi.fn());
+const mockDrawerOpen = vi.hoisted(() => vi.fn());
+const mockShowModal = vi.hoisted(() => vi.fn((node) => node.props.onConfirm()));
+const mockUserPut = vi.hoisted(() => vi.fn((username, body) => ({ username, body })));
+const mockApiKeyDelete = vi.hoisted(() => vi.fn((keyId) => ({ keyId })));
+const mockGroupsGet = vi.hoisted(() => ({ groups: true }));
+let currentUser = { username: 'current', apikeys: [['existing', ['r'], '2026-12-31']], dashboard: [] };
+const modalContextToken = vi.hoisted(() => ({ name: 'modal-context' }));
+const drawerContextToken = vi.hoisted(() => ({ name: 'drawer-context' }));
+vi.mock('@tui/core', () => ({
+    useAppUser: () => ({ user: currentUser, setUser: mockSetUser })
+}));
+vi.mock('api', () => ({
+    default: {
+        user: {
+            put: mockUserPut,
+            groups: { get: () => mockGroupsGet }
+        },
+        auth: {
+            apikey: { del: mockApiKeyDelete }
+        }
+    }
+}));
+vi.mock('components/app/drawers/ApiKeyDrawer', () => ({
+    default: ({ onCreated }) => (_jsx("button", { onClick: () => onCreated('new-key', ['rw'], '2027-01-01'), children: "create api key" }))
+}));
+vi.mock('components/app/drawers/ViewGroupsDrawer', () => ({
+    default: ({ groups }) => _jsx("div", { children: groups.join(',') })
+}));
+vi.mock('components/app/providers/AppDrawerProvider', () => ({
+    AppDrawerContext: drawerContextToken
+}));
+vi.mock('components/app/providers/ModalProvider', () => ({
+    ModalContext: modalContextToken
+}));
+vi.mock('components/elements/display/modals/ConfirmDeleteModal', () => ({
+    default: ({ onConfirm }) => _jsx("button", { onClick: onConfirm, children: "confirm delete" })
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({ dispatchApi: mockDispatchApi })
+}));
+vi.mock('components/hooks/useMySnackbar', () => ({
+    default: () => ({
+        showSuccessMessage: mockShowSuccessMessage,
+        showWarningMessage: mockShowWarningMessage
+    })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+vi.mock('react-router', () => ({
+    useNavigate: () => mockNavigate
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === modalContextToken) {
+                return { showModal: mockShowModal };
+            }
+            if (context === drawerContextToken) {
+                return { open: mockDrawerOpen };
+            }
+            return actual.useContext(context);
+        }
+    };
+});
+import useMyUserFunctions from './useMyUserFunctions';
+describe('useMyUserFunctions', () => {
+    beforeEach(() => {
+        currentUser = { username: 'current', apikeys: [['existing', ['r'], '2026-12-31']], dashboard: [] };
+        mockDispatchApi.mockReset();
+        mockShowSuccessMessage.mockReset();
+        mockShowWarningMessage.mockReset();
+        mockNavigate.mockReset();
+        mockSetUser.mockReset();
+        mockDrawerOpen.mockReset();
+        mockShowModal.mockReset();
+        mockUserPut.mockReset();
+        vi.useRealTimers();
+    });
+    it('updates user profile fields and roles', async () => {
+        const { result } = renderHook(() => useMyUserFunctions());
+        const user = { username: 'demo', roles: ['member'], apikeys: [] };
+        await expect(result.current.editName(user, 'Demo User')).resolves.toEqual({ ...user, name: 'Demo User' });
+        await expect(result.current.editQuota(user, '42')).resolves.toEqual({ ...user, api_quota: 42 });
+        await expect(result.current.editQuota(user)).resolves.toEqual({ ...user, api_quota: 25 });
+        await expect(result.current.addRole(user, 'admin')).resolves.toEqual({ ...user, roles: ['member', 'admin'] });
+        await expect(result.current.removeRole({ ...user, roles: ['member', 'admin'] }, 'admin')).resolves.toEqual({
+            ...user,
+            roles: ['member']
+        });
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('api.user.name.updated');
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('api.user.quota.updated');
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('api.user.role.updated');
+    });
+    it('opens drawers for api keys and group viewing', async () => {
+        const { result } = renderHook(() => useMyUserFunctions());
+        result.current.addApiKey();
+        const apiKeyDrawerProps = mockDrawerOpen.mock.calls[0][0];
+        expect(apiKeyDrawerProps.titleKey).toBe('app.drawer.user.apikey.title');
+        const apiKeyChild = apiKeyDrawerProps.children;
+        apiKeyChild.props.onCreated('new-key', ['rw'], '2027-01-01');
+        expect(mockSetUser).toHaveBeenCalledWith({
+            ...currentUser,
+            apikeys: [...currentUser.apikeys, ['new-key', ['rw'], '2027-01-01']]
+        });
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('api.user.apikey.updated');
+        mockDispatchApi.mockResolvedValueOnce([]);
+        await result.current.viewGroups();
+        expect(mockShowWarningMessage).toHaveBeenCalledWith('api.user.groups.empty');
+        mockDispatchApi.mockResolvedValueOnce(['group-a', 'group-b']);
+        await result.current.viewGroups();
+        expect(mockDrawerOpen).toHaveBeenLastCalledWith(expect.objectContaining({ titleKey: 'app.drawer.user.groups.title', children: expect.any(Object) }));
+    });
+    it('removes api keys, updates dashboard settings, and logs out after password changes', async () => {
+        vi.useFakeTimers();
+        const { result } = renderHook(() => useMyUserFunctions());
+        const user = { username: 'demo', roles: ['member'], apikeys: [['key-1', ['r'], '2026-01-01']] };
+        await result.current.removeApiKey(user, ['key-1', ['r'], '2026-01-01']);
+        expect(mockShowModal).toHaveBeenCalled();
+        expect(mockApiKeyDelete).toHaveBeenCalledWith('key-1');
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('api.user.apikey.removed');
+        await result.current.setDashboard([{ i: 'widget' }]);
+        await result.current.setRefreshRate(30);
+        await result.current.editPassword('new-pass');
+        expect(mockShowSuccessMessage).toHaveBeenCalledWith('password.success');
+        await act(async () => {
+            await vi.advanceTimersByTimeAsync(5000);
+        });
+        expect(mockNavigate).toHaveBeenCalledWith('/logout');
+    });
+});

package/components/hooks/useRecordSelection.test.d.ts

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

package/components/hooks/useRecordSelection.test.js

@@ -0,0 +1,102 @@
+/// <reference types="vitest" />
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+const mockAddRecordToSelection = vi.hoisted(() => vi.fn());
+const mockRemoveRecordFromSelection = vi.hoisted(() => vi.fn());
+const mockClearSelectedRecords = vi.hoisted(() => vi.fn());
+const mockSetSelected = vi.hoisted(() => vi.fn());
+const parameterContextToken = vi.hoisted(() => ({ name: 'parameter-context' }));
+const recordContextToken = vi.hoisted(() => ({ name: 'record-context' }));
+const recordSearchContextToken = vi.hoisted(() => ({ name: 'record-search-context' }));
+let selectedRecords = [];
+let responseItems = [];
+vi.mock('components/app/providers/ParameterProvider', () => ({
+    ParameterContext: parameterContextToken
+}));
+vi.mock('components/app/providers/RecordProvider', () => ({
+    RecordContext: recordContextToken
+}));
+vi.mock('components/app/providers/RecordSearchProvider', () => ({
+    RecordSearchContext: recordSearchContextToken
+}));
+vi.mock('use-context-selector', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContextSelector: (context, selector) => {
+            if (context === recordSearchContextToken) {
+                return selector({ response: { items: responseItems } });
+            }
+            if (context === recordContextToken) {
+                return selector({
+                    selectedRecords,
+                    addRecordToSelection: mockAddRecordToSelection,
+                    removeRecordFromSelection: mockRemoveRecordFromSelection,
+                    clearSelectedRecords: mockClearSelectedRecords
+                });
+            }
+            if (context === parameterContextToken) {
+                return selector({ setSelected: mockSetSelected });
+            }
+            return selector(null);
+        }
+    };
+});
+import useRecordSelection from './useRecordSelection';
+describe('useRecordSelection', () => {
+    beforeEach(() => {
+        selectedRecords = [];
+        responseItems = [{ howler: { id: 'a' } }, { howler: { id: 'b' } }, { howler: { id: 'c' } }];
+        mockAddRecordToSelection.mockReset();
+        mockRemoveRecordFromSelection.mockReset();
+        mockClearSelectedRecords.mockReset();
+        mockSetSelected.mockReset();
+        document.getSelection = vi.fn(() => ({ removeAllRanges: vi.fn() }));
+    });
+    it('selects a single record on normal click', () => {
+        const { result } = renderHook(() => useRecordSelection());
+        const event = { ctrlKey: false, shiftKey: false };
+        act(() => {
+            result.current.onClick(event, { howler: { id: 'b' } });
+        });
+        expect(result.current.lastSelected).toBe('b');
+        expect(mockClearSelectedRecords).toHaveBeenCalledWith('b');
+        expect(mockSetSelected).toHaveBeenCalledWith('b');
+    });
+    it('toggles ctrl-clicked records in the multi-selection set', () => {
+        selectedRecords = [{ howler: { id: 'b' } }];
+        const { result } = renderHook(() => useRecordSelection());
+        const stopPropagation = vi.fn();
+        act(() => {
+            result.current.onClick({ ctrlKey: true, shiftKey: false, stopPropagation }, { howler: { id: 'b' } });
+        });
+        expect(mockRemoveRecordFromSelection).toHaveBeenCalledWith('b');
+        selectedRecords = [];
+        act(() => {
+            result.current.onClick({ ctrlKey: true, shiftKey: false, stopPropagation }, { howler: { id: 'c' } });
+        });
+        expect(mockAddRecordToSelection).toHaveBeenCalledWith('c');
+        expect(stopPropagation).toHaveBeenCalledTimes(2);
+    });
+    it('adds a shift-click range from the last selected hit', () => {
+        selectedRecords = [{ howler: { id: 'a' } }];
+        const { result, rerender } = renderHook(() => useRecordSelection());
+        act(() => {
+            result.current.setLastSelected('a');
+        });
+        rerender();
+        act(() => {
+            result.current.onClick({ ctrlKey: false, shiftKey: true, stopPropagation: vi.fn() }, { howler: { id: 'c' } });
+        });
+        expect(mockAddRecordToSelection).toHaveBeenCalledWith('a');
+        expect(mockAddRecordToSelection).toHaveBeenCalledWith('b');
+        expect(mockAddRecordToSelection).toHaveBeenCalledWith('c');
+    });
+    it('handles shift-click when nothing is selected yet', () => {
+        const { result } = renderHook(() => useRecordSelection());
+        act(() => {
+            result.current.onClick({ ctrlKey: false, shiftKey: true, stopPropagation: vi.fn() }, { howler: { id: 'a' } });
+        });
+        expect(mockAddRecordToSelection).toHaveBeenCalledWith('a');
+    });
+});

package/components/logins/Login.test.d.ts

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

package/components/logins/Login.test.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/// <reference types="vitest" />
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+const apiConfigContextToken = vi.hoisted(() => ({ name: 'api-config-context' }));
+let apiConfigValue = { loaded: false, config: {} };
+vi.mock('@mui/material', () => ({
+    Box: ({ children }) => _jsx("div", { children: children }),
+    CircularProgress: () => _jsx("div", { children: "loading" }),
+    Container: ({ children }) => _jsx("div", { children: children }),
+    Stack: ({ children }) => _jsx("div", { children: children }),
+    styled: (component) => () => component
+}));
+vi.mock('@tui/core', () => ({
+    PageCardCentered: ({ children }) => _jsx("div", { children: children })
+}));
+vi.mock('branding/AppBrand', () => ({
+    AppBrand: () => _jsx("div", { children: "brand" })
+}));
+vi.mock('components/app/providers/ApiConfigProvider', () => ({
+    ApiConfigContext: apiConfigContextToken
+}));
+vi.mock('components/elements/display/TextDivider', () => ({
+    default: () => _jsx("div", { children: "divider" })
+}));
+vi.mock('./auth/OAuthLogin', () => ({
+    default: ({ providers }) => _jsx("div", { children: providers.join(',') })
+}));
+vi.mock('./auth/UserPassLogin', () => ({
+    default: () => _jsx("div", { children: "userpass" })
+}));
+vi.mock('react', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        useContext: (context) => {
+            if (context === apiConfigContextToken)
+                return apiConfigValue;
+            return actual.useContext(context);
+        }
+    };
+});
+import LoginScreen from './Login';
+describe('Login', () => {
+    it('shows a loading indicator until config is loaded', () => {
+        apiConfigValue = { loaded: false, config: {} };
+        render(_jsx(LoginScreen, {}));
+        expect(screen.getByText('loading')).toBeInTheDocument();
+    });
+    it('renders internal and oauth login options from config', () => {
+        apiConfigValue = {
+            loaded: true,
+            config: {
+                configuration: {
+                    auth: {
+                        internal: { enabled: true },
+                        oauth_providers: ['azure', 'google']
+                    }
+                }
+            }
+        };
+        render(_jsx(LoginScreen, {}));
+        expect(screen.getByText('userpass')).toBeInTheDocument();
+        expect(screen.getByText('divider')).toBeInTheDocument();
+        expect(screen.getByText('azure,google')).toBeInTheDocument();
+    });
+});

package/components/logins/hooks/useLogin.test.d.ts

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