@cccsaurora/howler-ui 2.19.0-dev.1099 → 2.19.0-dev.1148

package/rest/AxiosClient.test.js

@@ -0,0 +1,184 @@
+/// <reference types="vitest" />
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import AxiosClient from './AxiosClient';
+// ---------------------------------------------------------------------------
+// vi.hoisted() ensures these values are available when the vi.mock factories
+// run (which happens before any module code executes).
+// ---------------------------------------------------------------------------
+const { mockAxiosInstance, mockAxiosError, mockInterceptorResponseUse, interceptorRef } = vi.hoisted(() => {
+    // Ref object used to capture the response interceptor across test resets
+    const _interceptorRef = { fn: null };
+    const _mockInterceptorResponseUse = vi.fn().mockImplementation((onFulfilled) => {
+        _interceptorRef.fn = onFulfilled;
+    });
+    const _mockAxiosInstance = vi.fn();
+    _mockAxiosInstance.interceptors = {
+        response: { use: _mockInterceptorResponseUse }
+    };
+    class MockAxiosError extends Error {
+        response;
+        constructor(message, response) {
+            super(message);
+            this.name = 'AxiosError';
+            this.response = response;
+        }
+    }
+    return {
+        mockAxiosInstance: _mockAxiosInstance,
+        mockAxiosError: MockAxiosError,
+        mockInterceptorResponseUse: _mockInterceptorResponseUse,
+        interceptorRef: _interceptorRef
+    };
+});
+vi.mock('axios', () => ({
+    default: { create: vi.fn(() => mockAxiosInstance) },
+    AxiosError: mockAxiosError
+}));
+vi.mock('axios-retry', () => ({
+    default: vi.fn(),
+    exponentialDelay: vi.fn(),
+    isNetworkError: vi.fn()
+}));
+vi.mock('utils/sessionStorage', () => ({
+    getAxiosCache: vi.fn(() => ({})),
+    setAxiosCache: vi.fn()
+}));
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+describe('AxiosClient', () => {
+    let client;
+    beforeEach(() => {
+        interceptorRef.fn = null;
+        client = new AxiosClient();
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    // -------------------------------------------------------------------------
+    // fetch() – happy paths
+    // -------------------------------------------------------------------------
+    describe('fetch() – successful responses', () => {
+        it('returns [data, status, headers] on a 200 response', async () => {
+            const payload = { api_response: { items: [] } };
+            mockAxiosInstance.mockResolvedValueOnce({
+                data: payload,
+                status: 200,
+                headers: { 'content-type': 'application/json' }
+            });
+            const result = await client.fetch('/api/v1/hit');
+            expect(result[0]).toEqual(payload);
+            expect(result[1]).toBe(200);
+        });
+        it('uses GET as the default HTTP method', async () => {
+            mockAxiosInstance.mockResolvedValueOnce({ data: {}, status: 200, headers: {} });
+            await client.fetch('/api/v1/hit');
+            const config = mockAxiosInstance.mock.calls[0][0];
+            expect(config.method).toBe('get');
+        });
+        it('passes POST as the HTTP method when specified', async () => {
+            mockAxiosInstance.mockResolvedValueOnce({ data: {}, status: 201, headers: {} });
+            await client.fetch('/api/v1/hit', 'post', { key: 'val' });
+            const config = mockAxiosInstance.mock.calls[0][0];
+            expect(config.method).toBe('post');
+        });
+        it('serialises the body as a JSON string', async () => {
+            mockAxiosInstance.mockResolvedValueOnce({ data: {}, status: 200, headers: {} });
+            await client.fetch('/api/v1/hit', 'post', { status: 'open' });
+            const config = mockAxiosInstance.mock.calls[0][0];
+            expect(config.data).toBe(JSON.stringify({ status: 'open' }));
+        });
+        it('passes URLSearchParams through as params', async () => {
+            mockAxiosInstance.mockResolvedValueOnce({ data: {}, status: 200, headers: {} });
+            const params = new URLSearchParams({ q: 'test' });
+            await client.fetch('/api/v1/hit', 'get', undefined, params);
+            const config = mockAxiosInstance.mock.calls[0][0];
+            expect(config.params).toBe(params);
+        });
+        it('forwards custom headers', async () => {
+            mockAxiosInstance.mockResolvedValueOnce({ data: {}, status: 200, headers: {} });
+            const headers = { Authorization: '******' };
+            await client.fetch('/api/v1/hit', 'get', undefined, undefined, headers);
+            const config = mockAxiosInstance.mock.calls[0][0];
+            expect(config.headers).toEqual(headers);
+        });
+        it('sets withCredentials to true', async () => {
+            mockAxiosInstance.mockResolvedValueOnce({ data: {}, status: 200, headers: {} });
+            await client.fetch('/api/v1/hit');
+            const config = mockAxiosInstance.mock.calls[0][0];
+            expect(config.withCredentials).toBe(true);
+        });
+        it('passes the URL through to the axios config', async () => {
+            mockAxiosInstance.mockResolvedValueOnce({ data: {}, status: 200, headers: {} });
+            await client.fetch('/api/v1/test-url');
+            const config = mockAxiosInstance.mock.calls[0][0];
+            expect(config.url).toBe('/api/v1/test-url');
+        });
+    });
+    // -------------------------------------------------------------------------
+    // fetch() – error handling
+    // -------------------------------------------------------------------------
+    describe('fetch() – error handling', () => {
+        it('returns [data, status, headers] when the error is an AxiosError with a response', async () => {
+            const errorResponse = { data: { error: 'not found' }, status: 404, headers: {} };
+            const axiosErr = new mockAxiosError('Not Found', errorResponse);
+            mockAxiosInstance.mockRejectedValueOnce(axiosErr);
+            const result = await client.fetch('/api/v1/missing');
+            expect(result[0]).toEqual({ error: 'not found' });
+            expect(result[1]).toBe(404);
+        });
+        it('rethrows non-AxiosError exceptions', async () => {
+            mockAxiosInstance.mockRejectedValueOnce(new TypeError('network failure'));
+            await expect(client.fetch('/api/v1/hit')).rejects.toThrow('network failure');
+        });
+        it('rethrows AxiosError that has no response body', async () => {
+            // AxiosError without a .response property → condition `e.response?.data` is falsy → rethrow
+            const axiosErr = new mockAxiosError('timeout');
+            mockAxiosInstance.mockRejectedValueOnce(axiosErr);
+            await expect(client.fetch('/api/v1/hit')).rejects.toThrow('timeout');
+        });
+    });
+    // -------------------------------------------------------------------------
+    // AxiosCache – response interceptor
+    // -------------------------------------------------------------------------
+    describe('AxiosCache response interceptor', () => {
+        it('is registered on the axios instance during construction', () => {
+            expect(mockInterceptorResponseUse).toHaveBeenCalled();
+            expect(interceptorRef.fn).toBeTypeOf('function');
+        });
+        it('stores a new etag cache entry on a 2xx response with an etag header', async () => {
+            const { setAxiosCache } = await import('utils/sessionStorage');
+            const res = {
+                status: 200,
+                headers: { etag: '"abc123"' },
+                data: { value: 1 },
+                config: { headers: {} }
+            };
+            await interceptorRef.fn(res);
+            expect(setAxiosCache).toHaveBeenCalledWith('"abc123"', { value: 1 });
+        });
+        it('replaces data from cache on a 304 response', async () => {
+            const { getAxiosCache } = await import('utils/sessionStorage');
+            getAxiosCache.mockReturnValueOnce({ '"etag-v1"': { cached: true } });
+            const res = {
+                status: 304,
+                headers: {},
+                data: null,
+                config: { headers: { 'If-Match': '"etag-v1"' } }
+            };
+            const result = await interceptorRef.fn(res);
+            expect(result.data).toEqual({ cached: true });
+        });
+        it('passes through a 2xx response without an etag without caching', async () => {
+            const { setAxiosCache } = await import('utils/sessionStorage');
+            const res = {
+                status: 200,
+                headers: {},
+                data: { ok: true },
+                config: { headers: {} }
+            };
+            await interceptorRef.fn(res);
+            expect(setAxiosCache).not.toHaveBeenCalled();
+        });
+    });
+});

package/utils/stringUtils.d.ts

@@ -6,3 +6,4 @@ export declare const sanitizeLuceneQuery: (query: string) => string;
 export declare const safeStringPropertyCompare: (propertyPath: string) => (a: unknown, b: unknown) => any;
 export declare const sanitizeMultilineLucene: (query: string) => string;
 export declare const validateRegex: (regex: string) => boolean;
+export declare const parsePixelSizeStringToInt: (size: string) => number;

package/utils/stringUtils.js

@@ -45,3 +45,10 @@ export const validateRegex = (regex) => {
         return false;
     }
 };
+export const parsePixelSizeStringToInt = (size) => {
+    const match = size.match(/^(\d+(\.\d+)?)(px)?$/);
+    if (match) {
+        return parseInt(match[1]);
+    }
+    return null;
+};

package/utils/stringUtils.test.js

@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
 import { describe, expect, it } from 'vitest';
-import { maxLenStr, nameToInitials, safeFieldValue, safeFieldValueURI, safeStringPropertyCompare, sanitizeLuceneQuery, sanitizeMultilineLucene, validateRegex } from './stringUtils';
+import { maxLenStr, nameToInitials, parsePixelSizeStringToInt, safeFieldValue, safeFieldValueURI, safeStringPropertyCompare, sanitizeLuceneQuery, sanitizeMultilineLucene, validateRegex } from './stringUtils';
 describe('nameToInitials', () => {
     it('returns initials from a standard first-last name', () => {
         expect(nameToInitials('John Doe')).toEqual(['J', 'D']);
@@ -157,3 +157,23 @@ describe('validateRegex', () => {
         expect(validateRegex('a{2,5}')).toBe(true);
     });
 });
+describe('parsePixelSizeStringToInt', () => {
+    it('parses a pixel size string with "px" suffix', () => {
+        expect(parsePixelSizeStringToInt('100px')).toBe(100);
+    });
+    it('parses a pixel size string without "px" suffix', () => {
+        expect(parsePixelSizeStringToInt('200')).toBe(200);
+    });
+    it('parses a pixel size string with decimal value', () => {
+        expect(parsePixelSizeStringToInt('150.5px')).toBe(150);
+    });
+    it('returns null for a non-numeric string', () => {
+        expect(parsePixelSizeStringToInt('abc')).toBeNull();
+    });
+    it('returns null for an empty string', () => {
+        expect(parsePixelSizeStringToInt('')).toBeNull();
+    });
+    it('returns null for a string with an invalid unit', () => {
+        expect(parsePixelSizeStringToInt('50rem')).toBeNull();
+    });
+});

package/utils/utils.test.js

@@ -1,6 +1,6 @@
 /// <reference types="vitest" />
-import { describe, expect, it } from 'vitest';
-import { bytesToSize, compareTimestamp, convertCustomDateRangeToLucene, convertDateToLucene, convertLuceneToDate, flattenDeep, formatDate, getTimeRange, hashCode, humanReadableNumber, removeEmpty, searchObject, sortByTimestamp, tryParse, twitterShort } from './utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { bytesToSize, compareTimestamp, convertCustomDateRangeToLucene, convertDateToLucene, convertLuceneToDate, delay, flattenDeep, formatDate, getProvider, getTimeRange, hashCode, humanReadableNumber, removeEmpty, searchObject, searchResultsDisplay, sortByTimestamp, stringToColor, tryParse, twitterShort } from './utils';
 describe('bytesToSize', () => {
     it('returns "0 B" for 0', () => {
         expect(bytesToSize(0)).toBe('0 B');
@@ -290,3 +290,120 @@ describe('twitterShort', () => {
         expect(result).toMatch(/year/);
     });
 });
+describe('stringToColor', () => {
+    it('returns a non-empty string for any input', () => {
+        const result = stringToColor('hello');
+        expect(typeof result).toBe('string');
+        expect(result.length).toBeGreaterThan(0);
+    });
+    it('returns the same color for the same input', () => {
+        expect(stringToColor('alice')).toBe(stringToColor('alice'));
+    });
+    it('returns different colors for different inputs', () => {
+        // Not guaranteed for all pairs, but statistically very likely for distinct words
+        const colors = ['alice', 'bob', 'carol', 'dave'].map(stringToColor);
+        const unique = new Set(colors);
+        expect(unique.size).toBeGreaterThan(1);
+    });
+    it('handles an empty string without throwing', () => {
+        expect(() => stringToColor('')).not.toThrow();
+    });
+});
+describe('delay', () => {
+    it('resolves after the specified time', async () => {
+        vi.useFakeTimers();
+        const promise = delay(100);
+        vi.advanceTimersByTime(100);
+        await expect(promise).resolves.toBeUndefined();
+        vi.useRealTimers();
+    });
+    it('does not resolve before the specified time', async () => {
+        vi.useFakeTimers();
+        let resolved = false;
+        delay(200).then(() => {
+            resolved = true;
+        });
+        vi.advanceTimersByTime(100);
+        expect(resolved).toBe(false);
+        vi.advanceTimersByTime(100);
+        await Promise.resolve(); // flush microtasks
+        expect(resolved).toBe(true);
+        vi.useRealTimers();
+    });
+    it('can be cancelled via the .cancel() method without rejecting by default', () => {
+        vi.useFakeTimers();
+        const d = delay(100);
+        expect(() => d.cancel()).not.toThrow();
+        vi.useRealTimers();
+    });
+    it('rejects on cancel when rejectOnCancel=true', async () => {
+        vi.useFakeTimers();
+        const d = delay(100, true);
+        const rejection = expect(d).rejects.toBeUndefined();
+        d.cancel();
+        await rejection;
+        vi.useRealTimers();
+    });
+});
+describe('getProvider', () => {
+    const originalLocation = window.location;
+    afterEach(() => {
+        Object.defineProperty(window, 'location', { value: originalLocation, writable: true });
+    });
+    it('returns the provider from the search params when not in oauth path', () => {
+        Object.defineProperty(window, 'location', {
+            writable: true,
+            value: { pathname: '/login', search: '?provider=azure', href: 'http://localhost/login?provider=azure' }
+        });
+        expect(getProvider()).toBe('azure');
+    });
+    it('returns null when no provider param is present and path is not oauth', () => {
+        Object.defineProperty(window, 'location', {
+            writable: true,
+            value: { pathname: '/hits', search: '', href: 'http://localhost/hits' }
+        });
+        expect(getProvider()).toBeNull();
+    });
+});
+describe('searchResultsDisplay', () => {
+    const originalLocation = window.location;
+    afterEach(() => {
+        Object.defineProperty(window, 'location', { value: originalLocation, writable: true });
+    });
+    it('returns count as string when below the max', () => {
+        Object.defineProperty(window, 'location', {
+            writable: true,
+            value: { pathname: '/', search: '', href: 'http://localhost/' }
+        });
+        expect(searchResultsDisplay(500)).toBe('500');
+    });
+    it('appends "+" when count equals the default max (10000) and no track_total_hits param', () => {
+        Object.defineProperty(window, 'location', {
+            writable: true,
+            value: { pathname: '/', search: '', href: 'http://localhost/' }
+        });
+        expect(searchResultsDisplay(10000)).toBe('10000+');
+    });
+    it('appends "+" when count matches the explicit track_total_hits param', () => {
+        Object.defineProperty(window, 'location', {
+            writable: true,
+            value: { pathname: '/', search: '?track_total_hits=500', href: 'http://localhost/?track_total_hits=500' }
+        });
+        expect(searchResultsDisplay(500)).toBe('500+');
+    });
+    it('does not append "+" when count does not equal track_total_hits', () => {
+        Object.defineProperty(window, 'location', {
+            writable: true,
+            value: { pathname: '/', search: '?track_total_hits=1000', href: 'http://localhost/?track_total_hits=1000' }
+        });
+        expect(searchResultsDisplay(500)).toBe('500');
+    });
+    it('uses a custom max when provided', () => {
+        Object.defineProperty(window, 'location', {
+            writable: true,
+            value: { pathname: '/', search: '', href: 'http://localhost/' }
+        });
+        expect(searchResultsDisplay(500, 500)).toBe('500+');
+        expect(searchResultsDisplay(499, 500)).toBe('499');
+    });
+});

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

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDropDown, InfoOutlined, List, Settings, TableChart, ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
-import { Checkbox, Divider, FormLabel, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
-import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
-import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { useTranslation } from 'react-i18next';
-import { useContextSelector } from 'use-context-selector';
-import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-const LayoutSettings = () => {
-    const { t } = useTranslation();
-    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
-    const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
-    const [templateFieldCount, setTemplateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
-    return (_jsx(ChipPopper, { icon: _jsx(Tooltip, { title: t('search.layout.settings'), children: _jsx(Settings, {}) }), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, disablePortal: false, slotProps: { chip: { size: 'medium', 'aria-label': t('search.layout.settings') } }, placement: "bottom-end", children: _jsxs(Stack, { spacing: 1, alignItems: "start", children: [_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "display_type", children: t('page.settings.local.hits.display_type') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.display_type.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", "aria-labelledby": "display_type", children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "layout", children: t('page.settings.local.hits.layout') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.layout.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(ToggleButtonGroup, { exclusive: true, size: "small", value: hitLayout, onChange: (_, value) => setHitLayout(value), "aria-labelledby": "layout", children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "field_count", children: t('page.settings.local.hits.field_count') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.field_count.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignSelf: "stretch", children: [_jsx(Checkbox, { checked: templateFieldCount !== null, onChange: (_, checked) => setTemplateFieldCount(checked ? 3 : null), size: "small" }), _jsx(TextField, { type: "number", size: "small", disabled: templateFieldCount === null, value: templateFieldCount ?? 3, fullWidth: true, onChange: e => {
-                                const val = parseInt(e.target.value);
-                                if (!isNaN(val)) {
-                                    setTemplateFieldCount(Math.min(15, Math.max(0, val)));
-                                }
-                            }, inputProps: { min: 0, max: 15, 'aria-labelledby': 'field_count' } })] })] }) }));
-};
-export default LayoutSettings;