@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1607

package/plugins/clue/components/ClueLeadForm.js

@@ -10,8 +10,8 @@ const ClueLeadForm = ({ lead, metadata, update, updateMetadata }) => {
     const { config } = useContext(ApiConfigContext);
     const fetchers = useClueFetcherSelector(ctx => ctx.fetchers);
     const [showCustom, setShowCustom] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "horizontal" }), _jsx(Autocomplete, { disabled: !lead, options: Object.keys(fetchers), renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.clue') }), value: Object.keys(fetchers).includes(lead?.content) ? lead.content : null, onChange: (_ev, content) => update({ content, metadata: '{}' }), renderOption: ({ key, ...props }, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: _jsx("code", { children: option }), secondary: fetchers[option].description }, key)) }), _jsx(Autocomplete, { options: fetchers[lead?.content]?.supported_types ??
-                    uniq(Object.values(fetchers).flatMap(fetcher => fetcher.supported_types)), renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.clue.type') }), value: metadata?.type ?? null, onChange: (_ev, type) => updateMetadata({ type }) }), _jsx(Autocomplete, { options: ['custom', ...Object.keys(config.indexes.hit)], disabled: !metadata?.type, renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.clue.value') }), getOptionLabel: opt => t(opt), value: metadata?.value ?? null, onChange: (_ev, value) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "horizontal" }), _jsx(Autocomplete, { disabled: !lead, options: Object.keys(fetchers), renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.clue') }), value: lead?.content && Object.keys(fetchers).includes(lead.content) ? lead.content : undefined, onChange: (_ev, content) => update({ content: content ?? undefined, metadata: '{}' }), renderOption: ({ key, ...props }, option) => (_jsx(ListItemText, { ...props, sx: { flexDirection: 'column', alignItems: 'start !important' }, primary: _jsx("code", { children: option }), secondary: fetchers[option].description }, key)) }), _jsx(Autocomplete, { options: fetchers[lead?.content ?? '']?.supported_types ??
+                    uniq(Object.values(fetchers).flatMap(fetcher => fetcher.supported_types)), renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.clue.type') }), value: metadata?.type ?? null, onChange: (_ev, type) => updateMetadata({ type }) }), _jsx(Autocomplete, { options: ['custom', ...Object.keys(config.indexes?.hit ?? {})], disabled: !metadata?.type, renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.clue.value') }), getOptionLabel: opt => t(opt), value: metadata?.value ?? null, onChange: (_ev, value) => {
                     if (value === 'custom') {
                         setShowCustom(true);
                     }

package/plugins/clue/components/CluePivot.js

@@ -11,6 +11,7 @@ import isBoolean from 'lodash-es/isBoolean';
 import isNil from 'lodash-es/isNil';
 import { memo, useCallback, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 const CluePivot = ({ pivot, hit, compact }) => {
     const guessType = useClueEnrichSelector(ctx => ctx?.guessType);
     const { showErrorMessage } = useMySnackbar();
@@ -30,7 +31,7 @@ const CluePivot = ({ pivot, hit, compact }) => {
             }
             return mapping.custom_value;
         }
-        if (!Object.keys(config.indexes.hit).includes(mapping.field)) {
+        if (!config.indexes || !Object.keys(config.indexes.hit).includes(mapping.field)) {
             return mapping.field;
         }
         const hitData = get(hit, mapping.field);
@@ -60,7 +61,7 @@ const CluePivot = ({ pivot, hit, compact }) => {
         }
         // We have a single object and that's what they want
         return hitData;
-    }, [actions, config.indexes.hit, hit]);
+    }, [actions, config.indexes, hit]);
     const onClueClick = useCallback(async (event, forceMenu = false) => {
         event.preventDefault();
         event.stopPropagation();
@@ -81,9 +82,7 @@ const CluePivot = ({ pivot, hit, compact }) => {
                 if (Array.isArray(value)) {
                     return [
                         _mapping.key,
-                        value
-                            .filter(val => !isNil(val))
-                            .map(val => ({
+                        value.filter(notNil).map(val => ({
                             type: config.configuration?.mapping?.[_mapping.field] || guessType(val.toString()),
                             value: val
                         }))
@@ -101,7 +100,7 @@ const CluePivot = ({ pivot, hit, compact }) => {
         }));
         const selectors = (actions[pivot.value].accept_multiple ? [data.selectors] : [data.selector])
             .flat()
-            .filter(val => !isNil(val));
+            .filter(notNil);
         delete data.selector;
         delete data.selectors;
         try {
@@ -123,7 +122,7 @@ const CluePivot = ({ pivot, hit, compact }) => {
         t
     ]);
     if (!actions[pivot.value]) {
-        return;
+        return null;
     }
     return (_jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: e => onClueClick(e), sx: [
             theme => ({

package/plugins/clue/components/CluePivotForm.js

@@ -26,6 +26,9 @@ const WRAPPED_RENDERERS = materialRenderers.map(value => ({
     ...value,
     renderer: ({ ...props }) => (_jsx(ErrorBoundary, { children: _jsx(value.renderer, { ...props }) }))
 }));
+const acceptsEmpty = (action) => {
+    return Object.getOwnPropertyDescriptor(action, 'accept_empty')?.value === true;
+};
 /**
  * CluePivotForm Component
  *
@@ -72,15 +75,16 @@ const CluePivotForm = ({ pivot, update }) => {
             ...actions[value].extra_schema
         });
         // Enhance string properties with hit index options for better UX
-        Object.entries(clueAdaptedSchema.properties).forEach(([key, prop]) => {
+        Object.entries(clueAdaptedSchema.properties ?? {}).forEach(([key, prop]) => {
+            const hitFields = Object.keys(config.indexes?.hit ?? {});
             // Handle boolean properties by converting to enum with hit indexes
             if (typeof prop === 'boolean') {
-                clueAdaptedSchema.properties[key] = { enum: Object.keys(config.indexes.hit) };
+                clueAdaptedSchema.properties[key] = { enum: hitFields };
                 return;
             }
             if (prop.type === 'array') {
                 if (isBoolean(prop.items)) {
-                    clueAdaptedSchema.properties[key] = { enum: Object.keys(config.indexes.hit) };
+                    clueAdaptedSchema.properties[key] = { enum: hitFields };
                     return;
                 }
                 else if (!Array.isArray(prop.items)) {
@@ -98,11 +102,11 @@ const CluePivotForm = ({ pivot, update }) => {
             }
             // Add hit index options to string properties without existing enums
             if (!prop.enum && !prop.oneOf) {
-                prop.enum = Object.keys(config.indexes.hit);
+                prop.enum = hitFields;
             }
         });
         return clueAdaptedSchema;
-    }, [actions, config.indexes.hit, pivot?.value]);
+    }, [actions, config.indexes, pivot?.value]);
     /**
      * Generates the UI schema for JsonForms based on the form schema.
      * This defines the layout and rendering options for each form field.
@@ -123,7 +127,7 @@ const CluePivotForm = ({ pivot, update }) => {
             }
             else {
                 // Required fields appear first
-                return +formSchema?.required.includes(a_key) - +formSchema?.required.includes(b_key);
+                return +(formSchema?.required ?? []).includes(a_key) - +(formSchema?.required ?? []).includes(b_key);
             }
         })
             .map(([key, value]) => ({
@@ -151,12 +155,15 @@ const CluePivotForm = ({ pivot, update }) => {
      */
     const onUpdate = useCallback((value) => {
         const mappings = [];
-        // TODO: Fix type hints and remove the any cast
         // For actions that don't accept empty inputs, add selector mapping
-        if (!actions[value].accept_empty) {
+        const action = actions[value];
+        if (!action) {
+            return;
+        }
+        if (!acceptsEmpty(action)) {
             // Use 'selectors' for multiple selection, 'selector' for single selection
             mappings.push({
-                key: actions[value].accept_multiple ? 'selectors' : 'selector',
+                key: action.accept_multiple ? 'selectors' : 'selector',
                 field: 'howler.id'
             });
         }
@@ -209,9 +216,9 @@ const CluePivotForm = ({ pivot, update }) => {
                                             padding: theme.spacing(0.5),
                                             borderRadius: theme.shape.borderRadius
                                         }, children: actionId })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", alignSelf: "start", children: definition.summary })] }, key));
-                }, getOptionLabel: opt => actions[opt]?.name ?? '', renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: t('route.dossiers.manager.pivot.value') })), value: pivot?.value ?? '', onChange: (_ev, value) => onUpdate(value) }), _jsx(Divider, { flexItem: true }), _jsx(Typography, { children: t('route.dossiers.manager.pivot.mappings') }), selectorMapping && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { fullWidth: true, options: ['custom', ...Object.keys(config.indexes.hit)], renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: capitalize(selectorMapping.key), sx: { minWidth: '150px' } })), value: selectorMapping.field, onChange: (_ev, field) => update({
-                            mappings: pivot.mappings.map(_mapping => _mapping.key === selectorMapping.key ? { ..._mapping, field } : _mapping)
-                        }) }), selectorMapping.field === 'custom' && (_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.mapping.custom'), disabled: !pivot, value: selectorMapping?.custom_value ?? null, onChange: ev => update({
+                }, getOptionLabel: opt => actions[opt]?.name ?? '', renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: t('route.dossiers.manager.pivot.value') })), value: pivot?.value ?? '', onChange: (_ev, value) => onUpdate(value) }), _jsx(Divider, { flexItem: true }), _jsx(Typography, { children: t('route.dossiers.manager.pivot.mappings') }), selectorMapping && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { fullWidth: true, options: ['custom', ...Object.keys(config.indexes?.hit ?? {})], renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: capitalize(selectorMapping.key), sx: { minWidth: '150px' } })), value: selectorMapping.field ?? '', onChange: (_ev, field) => update({
+                            mappings: pivot.mappings.map(_mapping => _mapping.key === selectorMapping.key ? { ..._mapping, field: field } : _mapping)
+                        }) }), selectorMapping.field === 'custom' && (_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.mapping.custom'), disabled: !pivot, value: selectorMapping?.custom_value ?? '', onChange: ev => update({
                             mappings: pivot.mappings.map(_mapping => _mapping.key === selectorMapping.key ? { ..._mapping, custom_value: ev.target.value } : _mapping)
                         }) }))] })), formSchema && (_jsx(ThemeProvider, { theme: _theme => createTheme({
                     ..._theme,
@@ -252,14 +259,18 @@ const CluePivotForm = ({ pivot, update }) => {
                             //    {key.1: 'howler.status', key.2: 'howler.id'}
                             //
                             // This is very confusing - ask Matt R if you need a better explanation.
-                            const fullData = { ...nestedData, ...flatData, ...pick(pivot.mappings, ['selector', 'selectors']) };
+                            const fullData = {
+                                ...nestedData,
+                                ...flatData,
+                                ...pick(pivot.mappings ?? [], ['selector', 'selectors'])
+                            };
                             // Convert form data back to mappings format
                             const newMappings = Object.entries(fullData).map(([key, val]) => ({
                                 key,
                                 // Use 'custom' field type if value is not a standard hit index
-                                field: val in config.indexes.hit ? val : 'custom',
+                                field: val in (config.indexes?.hit ?? {}) ? val : 'custom',
                                 // Store custom values separately from field names
-                                custom_value: val in config.indexes.hit ? null : val
+                                custom_value: val in (config.indexes?.hit ?? {}) ? null : val
                             }));
                             // Only update if mappings have actually changed (performance optimization)
                             if (!isEqual(newMappings, pivot.mappings)) {

package/plugins/clue/components/ClueTypography.js

@@ -25,13 +25,13 @@ const ClueTypography = ({ children, value, context, field, obj, ...props }) => {
             slotProps: {
                 stack: {
                     sx: { mr: 'auto' },
-                    onClick: e => {
+                    onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
                     }
                 },
                 popover: {
-                    onClick: e => {
+                    onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
                     }

package/plugins/clue/helpers.js

@@ -15,10 +15,10 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 const MarkdownTypography = ({ type, value, ...props }) => {
     const { t } = useTranslation();
+    const guessType = useClueEnrichSelector(ctx => ctx?.guessType);
     try {
-        const guessType = useClueEnrichSelector(ctx => ctx.guessType);
-        if (!type || type?.toString().toLowerCase() === 'guess') {
-            type = guessType(value.toString());
+        if (guessType && (!type || type?.toString().toLowerCase() === 'guess')) {
+            type = guessType(value.toString()) ?? undefined;
         }
         if (!type) {
             return _jsx("span", { children: value });
@@ -26,7 +26,7 @@ const MarkdownTypography = ({ type, value, ...props }) => {
         return _jsx(EnrichedTypography, { ...props, type: type, value: value });
     }
     catch (err) {
-        return (_jsxs(Stack, { children: [_jsx("strong", { style: { color: 'red' }, children: t('markdown.error') }), _jsx("strong", { children: err.toString() }), _jsx("code", { style: { fontSize: '0.8rem' }, children: _jsx("pre", { children: err.stack }) })] }));
+        return (_jsxs(Stack, { children: [_jsx("strong", { style: { color: 'red' }, children: t('markdown.error') }), _jsx("strong", { children: err instanceof Error ? err.toString() : String(err) }), _jsx("code", { style: { fontSize: '0.8rem' }, children: _jsx("pre", { children: err instanceof Error ? err.stack : undefined }) })] }));
     }
 };
 const ClueGroup = props => {
@@ -58,7 +58,7 @@ const HELPERS = [
             if (typeof type !== 'string' || typeof value !== 'string') {
                 return (_jsxs(Stack, { spacing: 1, children: [_jsx("strong", { style: { color: 'red' }, children: i18nInstance.t('markdown.error') }), _jsx("code", { style: { fontSize: '0.8rem' }, children: i18nInstance.t('markdown.helpers.clue.arguments') })] }));
             }
-            return (_jsx(MarkdownTypography, { slotProps: { stack: { component: 'span', sx: { width: 'fit-content' } } }, component: "span", type: type, value: typeof value === 'string' ? value : null }));
+            return (_jsx(MarkdownTypography, { slotProps: { stack: { component: 'span', sx: { width: 'fit-content' } } }, component: "span", type: type, value: value }));
         }
     },
     {

package/plugins/clue/index.d.ts

@@ -16,7 +16,7 @@ declare class CluePlugin extends HowlerPlugin {
     setup(): typeof useSetup;
     localization(i18nInstance: I18N): void;
     helpers(): HowlerHelper[];
-    typography(_props: PluginTypographyProps): import("react/jsx-runtime").JSX.Element;
-    chip(_props: PluginChipProps): import("react/jsx-runtime").JSX.Element;
+    typography(_props: PluginTypographyProps): import("react").JSX.Element;
+    chip(_props: PluginChipProps): import("react").JSX.Element;
 }
 export default CluePlugin;

package/plugins/clue/index.js

@@ -22,7 +22,7 @@ class CluePlugin extends HowlerPlugin {
     description = 'This plugin enables clue enrichment in Howler.';
     activate() {
         super.activate();
-        const leadForm = props => _jsx(ClueLeadForm, { ...props });
+        const leadForm = (props) => _jsx(ClueLeadForm, { ...props });
         const leadRenderer = (content, metadata, hit) => {
             const parsedProps = JSON.parse(metadata);
             const value = get(hit, parsedProps.value);

package/plugins/clue/setup.js

@@ -1,6 +1,6 @@
+import { useAppUser } from '@tui/core';
 import { SNACKBAR_EVENT_ID } from '@cccsaurora/clue-ui/data/event';
 import useClue from '@cccsaurora/clue-ui/hooks/useClue';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { useContext, useEffect } from 'react';

package/plugins/clue/utils.d.ts

@@ -1,3 +1,3 @@
 import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-export declare const useType: (hit?: Hit | Event, field?: string, value?: string) => any;
+export declare const useType: (hit?: Hit | Event, field?: string, value?: string) => string | null;

package/plugins/store.d.ts

@@ -1,16 +1,28 @@
+import type { LeftNavMenuItem } from '@tui/core';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { ReactElement } from 'react';
 import { Event } from 'react-pluggable';
-import type { AppLeftNavElement } from '../commons/components/app/AppConfigs';
 import type HowlerPlugin from './HowlerPlugin';
 export declare class HitEvent extends Event {
     hit: Hit;
     constructor(type: string, hit: Hit);
 }
-export declare enum MainMenuInsertOperation {
-    Insert = "INSERT",
-    InsertAfter = "AFTER",
-    InsertBefore = "BEFORE"
-}
+export type MainMenuOperation = {
+    type: 'append';
+    parentId: string;
+    item: LeftNavMenuItem;
+} | {
+    type: 'insertRelative';
+    anchorId: string;
+    position: 'before' | 'after';
+    item: LeftNavMenuItem;
+} | {
+    type: 'remove';
+    targetId: string;
+};
+export type MainMenuItemOperation = Exclude<MainMenuOperation, {
+    type: 'remove';
+}>;
 declare class HowlerPluginStore {
     private _pluginStore;
     plugins: string[];
@@ -21,40 +33,25 @@ declare class HowlerPluginStore {
     private _adminMenuItems;
     private _mainMenuOperations;
     private _routes;
-    private _sitemaps;
     install(plugin: HowlerPlugin): void;
     addLead(format: string): boolean;
     addPivot(format: string): boolean;
     addUserMenuItem(menuItem: {
         i18nKey: string;
         route: string;
-        icon: JSX.Element;
+        icon: ReactElement;
     }): void;
     addAdminMenuItem(menuItem: {
         i18nKey: string;
         route: string;
-        icon: JSX.Element;
-    }): void;
-    addMainMenuItem(menuOperation: {
-        operation: string;
-        targetId: string;
-        item: AppLeftNavElement;
+        icon: ReactElement;
     }): void;
+    addMainMenuOperation(menuOperation: MainMenuOperation): void;
     addRoute(route: {
         path: string;
-        element: JSX.Element;
+        element: ReactElement;
         children?: [];
     }): void;
-    addSitemap(sitemap: {
-        path: string;
-        title: string;
-        icon?: JSX.Element;
-        isRoot?: boolean;
-        isLeaf?: boolean;
-        excluded?: boolean;
-        breadcrumbs?: string[];
-        textWidth?: number;
-    }): void;
     addOperation(format: string): boolean;
     get leadFormats(): string[];
     get pivotFormats(): string[];
@@ -62,33 +59,19 @@ declare class HowlerPluginStore {
     get userMenuItems(): {
         i18nKey: string;
         route: string;
-        icon: JSX.Element;
+        icon: ReactElement;
     }[];
     get adminMenuItems(): {
         i18nKey: string;
         route: string;
-        icon: JSX.Element;
-    }[];
-    get mainMenuOperations(): {
-        operation: string;
-        targetId: string;
-        item: AppLeftNavElement;
+        icon: ReactElement;
     }[];
+    get mainMenuOperations(): readonly MainMenuOperation[];
     get routes(): {
         path: string;
-        element: JSX.Element;
+        element: ReactElement;
         children?: [];
     }[];
-    get sitemaps(): {
-        path: string;
-        title: string;
-        icon?: JSX.Element;
-        isRoot?: boolean;
-        isLeaf?: boolean;
-        excluded?: boolean;
-        breadcrumbs?: string[];
-        textWidth?: number;
-    }[];
     get pluginStore(): import("react-pluggable").PluginStore;
 }
 declare const howlerPluginStore: HowlerPluginStore;

package/plugins/store.js

@@ -6,12 +6,6 @@ export class HitEvent extends Event {
         this.hit = hit;
     }
 }
-export var MainMenuInsertOperation;
-(function (MainMenuInsertOperation) {
-    MainMenuInsertOperation["Insert"] = "INSERT";
-    MainMenuInsertOperation["InsertAfter"] = "AFTER";
-    MainMenuInsertOperation["InsertBefore"] = "BEFORE";
-})(MainMenuInsertOperation || (MainMenuInsertOperation = {}));
 class HowlerPluginStore {
     _pluginStore = createPluginStore();
     plugins = [];
@@ -22,7 +16,6 @@ class HowlerPluginStore {
     _adminMenuItems = [];
     _mainMenuOperations = [];
     _routes = [];
-    _sitemaps = [];
     install(plugin) {
         if (this.plugins.includes(plugin.name)) {
             return;
@@ -51,15 +44,12 @@ class HowlerPluginStore {
     addAdminMenuItem(menuItem) {
         this._adminMenuItems.push(menuItem);
     }
-    addMainMenuItem(menuOperation) {
+    addMainMenuOperation(menuOperation) {
         this._mainMenuOperations.push(menuOperation);
     }
     addRoute(route) {
         this._routes.push(route);
     }
-    addSitemap(sitemap) {
-        this._sitemaps.push(sitemap);
-    }
     addOperation(format) {
         if (this._operations.includes(format)) {
             return false;
@@ -83,14 +73,11 @@ class HowlerPluginStore {
         return this._adminMenuItems;
     }
     get mainMenuOperations() {
-        return this._mainMenuOperations;
+        return [...this._mainMenuOperations];
     }
     get routes() {
         return this._routes;
     }
-    get sitemaps() {
-        return this._sitemaps;
-    }
     get pluginStore() {
         return this._pluginStore;
     }

package/rest/AxiosClient.js

@@ -1,4 +1,4 @@
-import axios, { AxiosError } from 'axios';
+import { AxiosError, create } from 'axios';
 import axiosRetry, { exponentialDelay, isNetworkError } from 'axios-retry';
 import { getAxiosCache, setAxiosCache } from '@cccsaurora/howler-ui/utils/sessionStorage';
 class AxiosCache {
@@ -23,7 +23,7 @@ export default class AxiosClient {
     cache;
     client;
     constructor() {
-        this.client = axios.create({
+        this.client = create({
             validateStatus: status => (status >= 200 && status < 300) || status === 304
         });
         this.cache = new AxiosCache(this.client);
@@ -32,7 +32,7 @@ export default class AxiosClient {
             retryCondition: err => {
                 return (
                 // Don't retry 502s, as we assume the server handles retries in those cases
-                isNetworkError(err) || (err?.response?.status >= 500 && err?.response?.status !== 502));
+                isNetworkError(err) || ((err?.response?.status ?? 0) >= 500 && err?.response?.status !== 502));
             },
             retryDelay: exponentialDelay
         });

package/rest/FetchClient.d.ts

@@ -3,5 +3,5 @@ import type RestClient from '@cccsaurora/howler-ui/rest';
 export default class FetchClient implements RestClient {
     fetch<R>(url: string, method?: 'get' | 'post' | 'put' | 'delete', body?: any, params?: URLSearchParams, headers?: HeadersInit): Promise<[HowlerResponse<R>, number, {
         [index: string]: any;
-    }]>;
+    }] | undefined>;
 }

package/rest/FetchClient.js

@@ -1,14 +1,17 @@
 export default class FetchClient {
     async fetch(url, method = 'get', body, params, headers) {
         const _url = `${url}${params ? `?${params.toString()}` : ''}`;
-        const response = await fetch(_url, {
+        const request = {
             method,
             credentials: 'same-origin',
-            headers: headers,
-            body: body ? JSON.stringify(body) : null
-        });
+            headers: headers
+        };
+        if (method !== 'get' && body) {
+            request.body = JSON.stringify(body);
+        }
+        const response = await fetch(_url, request);
         if (response.status === 204) {
-            return null;
+            return;
         }
         const json = (await response.json());
         return [json, response.status, response.headers];

package/rest/FetchClient.test.js

@@ -38,6 +38,9 @@ describe('FetchClient', () => {
         const payload = { api_response: { items: [] } };
         mockFetch(200, payload);
         const result = await client.fetch('/api/v1/hit');
+        if (!result) {
+            throw new Error('Expected a response body.');
+        }
         expect(result[0]).toEqual(payload);
         expect(result[1]).toBe(200);
     });
@@ -47,11 +50,11 @@ describe('FetchClient', () => {
         const callArgs = spy.mock.calls[0][1];
         expect(callArgs.body).toBe(JSON.stringify({ key: 'val' }));
     });
-    it('sends null body when no body is provided', async () => {
+    it('omits the body when no body is provided', async () => {
         const spy = mockFetch(200, {});
         await client.fetch('/api/v1/hit', 'get');
         const callArgs = spy.mock.calls[0][1];
-        expect(callArgs.body).toBeNull();
+        expect(callArgs.body).toBeUndefined();
     });
     it('forwards custom headers to fetch', async () => {
         const spy = mockFetch(200, {});
@@ -59,10 +62,10 @@ describe('FetchClient', () => {
         const callArgs = spy.mock.calls[0][1];
         expect(callArgs.headers.Authorization).toBe('******');
     });
-    it('returns null for a 204 No Content response', async () => {
+    it('returns undefined for a 204 No Content response', async () => {
         mockFetch(204, null);
         const result = await client.fetch('/api/v1/hit', 'delete');
-        expect(result).toBeNull();
+        expect(result).toBeUndefined();
     });
     it('works with a PUT method', async () => {
         const spy = mockFetch(200, {});

package/rest/index.d.ts

@@ -1,6 +1,7 @@
 import type { HowlerResponse } from '@cccsaurora/howler-ui/api';
+export type RestResponse<R> = [HowlerResponse<R>, number, {
+    [index: string]: any;
+}];
 export default interface RestClient {
-    fetch<R>(url: string, method: 'get' | 'post' | 'put' | 'delete', body?: any, params?: URLSearchParams, headers?: HeadersInit): Promise<[HowlerResponse<R>, number, {
-        [index: string]: any;
-    }]>;
+    fetch<R>(url: string, method: 'get' | 'post' | 'put' | 'delete', body?: any, params?: URLSearchParams, headers?: HeadersInit): Promise<RestResponse<R> | undefined>;
 }

package/setupTests.d.ts

@@ -1 +1,4 @@
 import '@testing-library/jest-dom/vitest';
+declare global {
+    var IS_REACT_ACT_ENVIRONMENT: boolean;
+}

package/tests/MockLocalStorage.js

@@ -1,8 +1,9 @@
+// @ts-nocheck
 export default class MockLocalStorage {
     constructor() {
         Object.defineProperty(this, 'getItem', {
             enumerable: false,
-            value: vi.fn(key => (this[key] !== undefined ? this[key] : null))
+            value: vi.fn(key => (this[key] !== undefined && this[key] !== null ? this[key] : null))
         });
         Object.defineProperty(this, 'setItem', {
             enumerable: false,

package/tests/mocks.d.ts

@@ -4,7 +4,7 @@
  */
 export declare const setupContextSelectorMock: () => void;
 /**
- * Sets up a mock for react-router-dom with common defaults
+ * Sets up a mock for react-router with common defaults
  * @param options - Override specific router behavior
  */
 export declare const setupReactRouterMock: () => {
@@ -15,7 +15,7 @@ export declare const setupReactRouterMock: () => {
         search: string;
     };
     mockParams: {
-        id: any;
+        id: undefined;
     };
 };
 /**

package/tests/mocks.js

@@ -22,7 +22,7 @@ export const setupContextSelectorMock = () => {
     afterAll(() => vi.resetModules());
 };
 /**
- * Sets up a mock for react-router-dom with common defaults
+ * Sets up a mock for react-router with common defaults
  * @param options - Override specific router behavior
  */
 export const setupReactRouterMock = () => {
@@ -31,8 +31,8 @@ export const setupReactRouterMock = () => {
     const mockSearchParams = vi.hoisted(() => new URLSearchParams());
     const mockSetParams = vi.hoisted(() => vi.fn());
     beforeAll(() => {
-        vi.mock('react-router-dom', async () => {
-            const actual = await vi.importActual('react-router-dom');
+        vi.mock('react-router', async () => {
+            const actual = await vi.importActual('react-router');
             return {
                 ...actual,
                 Link: forwardRef(({ to, children, ...props }, ref) => (_jsx("a", { ref: ref, href: to, ...props, children: children }))),

package/tests/server-handlers.js

@@ -92,7 +92,7 @@ const handlers = [
         ]
     })),
     http.post('/api/v1/search/facet/hit', async ({ request }) => {
-        const payload = await request.json();
+        const payload = (await request.json());
         let facetResponse = Object.fromEntries(payload.fields.map(field => [field, { 'facet 1': 1, 'facet 2': 2 }]));
         if (payload.filters?.[0]?.includes('analytic')) {
             facetResponse = Object.fromEntries(payload.fields.map(field => [field, { 'Analytic 1': 1, 'Analytic 2': 2 }]));

package/utils/Throttler.js

@@ -1,7 +1,7 @@
 export default class Throttler {
     throttleId = null;
     delayId = null;
-    msec = null;
+    msec;
     constructor(msec) {
         this.msec = msec;
         this.debounce = this.debounce.bind(this);

package/utils/actionUtils.d.ts

@@ -28,4 +28,4 @@ export declare const getArgsByContext: (args: ActionOperationStep['args'], value
  * @param action The action to validate
  * @returns whether the action is ready to execute
  */
-export declare const operationReady: (data: Operation['data_json'], action: ActionOperation) => boolean;
+export declare const operationReady: (data?: Operation['data_json'], action?: ActionOperation) => boolean;