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

package/components/hooks/useMySearch.js

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, Box, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import HitPreview from '@cccsaurora/howler-ui/components/elements/hit/HitPreview';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
 import { useMyLocalStorageItem } from './useMyLocalStorage';
@@ -12,8 +12,12 @@ const useMySearch = () => {
     const navigate = useNavigate();
     const { t } = useTranslation();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [error, setError] = useState(false);
     return useMemo(() => ({
         onEnter: async (value, state) => {
+            if (!state) {
+                return;
+            }
             state.set({ ...state, searching: true });
             //dispatchApi not available here since snackbarProvider isn't initialised yet
             try {
@@ -24,24 +28,30 @@ const useMySearch = () => {
                     query: `howler.assignment:*${sanitizedValue}* OR howler.analytic:*${sanitizedValue}* OR ` +
                         `howler.detection:*${sanitizedValue}* OR howler.status:*${sanitizedValue}*`
                 });
+                if (!searchResult) {
+                    setError(true);
+                    state.set({ ...state, searching: false, items: [] });
+                    return;
+                }
+                setError(false);
                 state.set({
                     ...state,
                     searching: false,
-                    result: null,
                     items: searchResult.items.map(r => ({ id: r.howler.id, item: r }))
                 });
             }
             catch {
-                state.set({ ...state, searching: false, result: { error: true }, items: null });
+                setError(true);
+                state.set({ ...state, searching: false, items: [] });
             }
         },
         onItemSelect: ({ item }) => {
-            navigate(`/hits/${item.howler.id}`);
+            void navigate(`/hits/${item.howler.id}`);
         },
-        headerRenderer: (state) => (state.result?.error || !state.items) && (_jsx(Box, { sx: { p: 1, pb: 0, textAlign: 'center' }, children: state.result?.error ? (_jsx(Alert, { severity: "error", color: "error", children: t('hit.search.invalid') })) : ((!state.items || state.items.length === 0) && (_jsx(Typography, { sx: { mb: -1, color: 'text.secondary' }, children: t('hit.quicksearch') }))) })),
+        headerRenderer: (state) => (error || !state.items) && (_jsx(Box, { sx: { p: 1, pb: 0, textAlign: 'center' }, children: error ? (_jsx(Alert, { severity: "error", color: "error", children: t('hit.search.invalid') })) : ((!state.items || state.items.length === 0) && (_jsx(Typography, { sx: { mb: -1, color: 'text.secondary' }, children: t('hit.quicksearch') }))) })),
         itemRenderer: (item, options) => {
             return (_jsx(Link, { to: `/hits/${item.id}`, style: { flex: 1, textDecoration: 'none', color: 'inherit', overflow: 'hidden' }, children: _jsx(HitPreview, { hit: item.item, options: options }) }));
         }
-    }), [navigate, pageCount, t]);
+    }), [error, navigate, pageCount, t]);
 };
 export default useMySearch;

package/components/hooks/useMySnackbar.js

@@ -23,7 +23,7 @@ const useMySnackbar = () => {
             ...options.SnackbarProps,
             onClick: options.SnackbarProps?.onClick
                 ? e => {
-                    options.SnackbarProps?.onClick(e);
+                    options.SnackbarProps.onClick(e);
                     snackBarOptions.SnackbarProps.onClick(e);
                 }
                 : snackBarOptions.SnackbarProps.onClick

package/components/hooks/useMyTheme.d.ts

@@ -1,3 +1,3 @@
-import type { AppThemeConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
+import type { AppThemeConfigs } from '@tui/core';
 declare const useMyTheme: () => AppThemeConfigs;
 export default useMyTheme;

package/components/hooks/useMyTheme.js

@@ -1,13 +1,16 @@
 const DEFAULT_THEME = {
-    components: {
-        MuiChip: {
-            defaultProps: {
-                size: 'small'
+    global: {
+        components: {
+            MuiChip: {
+                defaultProps: {
+                    size: 'small'
+                }
             }
         }
     },
-    palette: {
-        dark: {
+    dark: {
+        palette: {
+            mode: 'dark',
             background: {
                 default: '#181818',
                 paper: '#181818'
@@ -18,8 +21,10 @@ const DEFAULT_THEME = {
             secondary: {
                 main: '#C0DEEC'
             }
-        },
-        light: {
+        }
+    },
+    light: {
+        palette: {
             primary: {
                 main: '#0062BF'
             },

package/components/hooks/useMyTheme.test.js

@@ -1,4 +1,5 @@
 /// <reference types="vitest" />
+// @ts-nocheck
 import { renderHook } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 import useMyTheme from './useMyTheme';
@@ -10,11 +11,15 @@ describe('useMyTheme', () => {
     });
     it('contains a dark palette entry', () => {
         const { result } = renderHook(() => useMyTheme());
-        expect(result.current.palette?.dark).toBeDefined();
+        expect(result.current.dark?.palette).toBeDefined();
+    });
+    it('sets the dark palette mode', () => {
+        const { result } = renderHook(() => useMyTheme());
+        expect(result.current.dark?.palette?.mode).toBe('dark');
     });
     it('contains a light palette entry', () => {
         const { result } = renderHook(() => useMyTheme());
-        expect(result.current.palette?.light).toBeDefined();
+        expect(result.current.light?.palette).toBeDefined();
     });
     it('returns the same reference on re-render (stable return value)', () => {
         const { result, rerender } = renderHook(() => useMyTheme());
@@ -24,12 +29,12 @@ describe('useMyTheme', () => {
     });
     it('dark palette includes primary and secondary colours', () => {
         const { result } = renderHook(() => useMyTheme());
-        expect(result.current.palette.dark.primary).toHaveProperty('main');
-        expect(result.current.palette.dark.secondary).toHaveProperty('main');
+        expect(result.current.dark.palette.primary).toHaveProperty('main');
+        expect(result.current.dark.palette.secondary).toHaveProperty('main');
     });
     it('light palette includes primary and secondary colours', () => {
         const { result } = renderHook(() => useMyTheme());
-        expect(result.current.palette.light.primary).toHaveProperty('main');
-        expect(result.current.palette.light.secondary).toHaveProperty('main');
+        expect(result.current.light.palette.primary).toHaveProperty('main');
+        expect(result.current.light.palette.secondary).toHaveProperty('main');
     });
 });

package/components/hooks/useMyUser.d.ts

@@ -1,4 +1,4 @@
-import type { AppUserService } from '@cccsaurora/howler-ui/commons/components/app/AppUserService';
+import type { AppUserService } from '@tui/core';
 import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
 declare const useMyUser: () => AppUserService<HowlerUser>;
 export default useMyUser;

package/components/hooks/useMyUser.js

@@ -1,18 +1,19 @@
-import { difference } from 'lodash-es';
+import { difference, isNil } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
 // Application specific hook that will provide configuration to commons [useUser] hook.
 const useMyUser = () => {
     const [user, setUser] = useState(null);
     const isReady = useCallback(() => !!user, [user]);
     const validateProps = useCallback((props) => {
-        if (props === undefined)
+        if (isNil(props))
             return true;
         return props.every((propDef) => {
-            if (Array.isArray(user[propDef.prop])) {
-                return difference(propDef.value, user[propDef.prop]).length <= 0;
+            const prop = propDef.prop;
+            if (Array.isArray(user[prop])) {
+                return difference(propDef.value, user[prop]).length <= 0;
             }
             else {
-                return user[propDef.prop] === propDef.value;
+                return user[prop] === propDef.value;
             }
         });
     }, [user]);

package/components/hooks/useMyUserFunctions.d.ts

@@ -23,7 +23,7 @@ declare const useMyUserFunctions: () => {
         refresh_rate?: number;
         name: string;
     }>;
-    editQuota: (user: HowlerUser, quota: string) => Promise<{
+    editQuota: (user: HowlerUser, quota?: string) => Promise<{
         avatar?: string;
         is_admin?: boolean;
         name: string;
@@ -94,7 +94,7 @@ declare const useMyUserFunctions: () => {
         refresh_rate?: number;
         roles: string[];
     }>;
-    removeApiKey: (user: HowlerUser, apiKey: [string, string[]]) => Promise<{
+    removeApiKey: (user: HowlerUser, [keyId]: [string, string[], string]) => Promise<{
         avatar?: string;
         is_admin?: boolean;
         name: string;

package/components/hooks/useMyUserFunctions.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppUser } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import ApiKeyDrawer from '@cccsaurora/howler-ui/components/app/drawers/ApiKeyDrawer';
 import ViewGroupsDrawer from '@cccsaurora/howler-ui/components/app/drawers/ViewGroupsDrawer';
 import { AppDrawerContext } from '@cccsaurora/howler-ui/components/app/providers/AppDrawerProvider';
@@ -8,13 +8,13 @@ import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/Mod
 import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
 import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import useMyApi from './useMyApi';
 import useMySnackbar from './useMySnackbar';
 const useMyUserFunctions = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
-    const { showSuccessMessage } = useMySnackbar();
+    const { showSuccessMessage, showWarningMessage } = useMySnackbar();
     const { dispatchApi } = useMyApi();
     const { showModal } = useContext(ModalContext);
     const drawer = useContext(AppDrawerContext);
@@ -30,7 +30,7 @@ const useMyUserFunctions = () => {
         }, [dispatchApi, showSuccessMessage, t]),
         editQuota: useCallback(async (user, quota) => {
             // eslint-disable-next-line @typescript-eslint/naming-convention
-            const api_quota = parseInt(quota);
+            const api_quota = quota ? parseInt(quota) : 25;
             await dispatchApi(api.user.put(user.username, { api_quota }), { throwError: true });
             showSuccessMessage(t('api.user.quota.updated'));
             return {
@@ -45,7 +45,7 @@ const useMyUserFunctions = () => {
             });
             showSuccessMessage(t('password.success'));
             setTimeout(() => {
-                navigate('/logout');
+                void navigate('/logout');
             }, 5000);
         }, [currentUser.username, dispatchApi, navigate, showSuccessMessage, t]),
         addRole: useCallback(async (user, role) => {
@@ -66,7 +66,7 @@ const useMyUserFunctions = () => {
                 children: (_jsx(ApiKeyDrawer, { onCreated: (newKeyName, privs, expiryDate) => {
                         setUser({
                             ...currentUser,
-                            apikeys: [...currentUser.apikeys, [newKeyName, privs, expiryDate]]
+                            apikeys: [...(currentUser.apikeys ?? []), [newKeyName, privs, expiryDate]]
                         });
                         showSuccessMessage(t('api.user.apikey.updated'));
                     } }))
@@ -84,24 +84,28 @@ const useMyUserFunctions = () => {
                 roles: newRoles
             };
         }, [dispatchApi, showSuccessMessage, t]),
-        removeApiKey: useCallback(async (user, apiKey) => {
+        removeApiKey: useCallback(async (user, [keyId]) => {
             await new Promise(res => {
                 showModal(_jsx(ConfirmDeleteModal, { onConfirm: res }));
             });
-            await dispatchApi(api.auth.apikey.del(apiKey[0]), { throwError: true });
+            await dispatchApi(api.auth.apikey.del(keyId), { throwError: true });
             showSuccessMessage(t('api.user.apikey.removed'));
             return {
                 ...user,
-                apikeys: user.apikeys.filter(([name, _]) => name !== apiKey[0])
+                apikeys: (user.apikeys ?? []).filter(([name, _]) => name !== keyId)
             };
         }, [dispatchApi, showModal, showSuccessMessage, t]),
         viewGroups: useCallback(async () => {
             const groups = await dispatchApi(api.user.groups.get());
+            if (!groups?.length) {
+                showWarningMessage(t('api.user.groups.empty'));
+                return;
+            }
             drawer.open({
                 titleKey: 'app.drawer.user.groups.title',
                 children: _jsx(ViewGroupsDrawer, { groups: groups })
             });
-        }, [dispatchApi, drawer]),
+        }, [dispatchApi, drawer, showWarningMessage, t]),
         setDashboard: useCallback(async (dashboard) => {
             await dispatchApi(api.user.put(currentUser.username, { dashboard }), {
                 throwError: true,

package/components/hooks/useMyUserList.d.ts

@@ -1,4 +1,4 @@
-declare const useMyUserList: (ids: Set<string>) => {
+declare const useMyUserList: (ids: Iterable<string>) => {
     [id: string]: import("../../models/entities/HowlerUser").HowlerUser;
 };
 export default useMyUserList;

package/components/hooks/useMyUtils.js

@@ -1,5 +1,5 @@
+import { useAppTheme } from '@tui/core';
 import { darken, lighten } from '@mui/material';
-import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import { useCallback } from 'react';
 const useMyUtils = () => {
     const { isDark } = useAppTheme();

package/components/hooks/useParamState.js

@@ -1,5 +1,7 @@
+import { isNil } from 'lodash-es';
 import { useCallback, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 const parseValue = (raw, defaultValue) => {
     if (raw === null)
         return defaultValue;
@@ -12,7 +14,7 @@ const parseValue = (raw, defaultValue) => {
     return raw;
 };
 const serializeValue = (value) => {
-    if (value === null || value === undefined)
+    if (isNil(value))
         return '';
     return String(value);
 };
@@ -36,7 +38,7 @@ const useParamState = (key, defaultValue = null, list = false) => {
             }
             else {
                 const scalar = newValue;
-                if (scalar !== defaultValue && scalar !== null && scalar !== undefined) {
+                if (scalar !== defaultValue && notNil(scalar)) {
                     next.set(key, serializeValue(scalar));
                 }
             }

package/components/hooks/useParamState.test.js

@@ -1,7 +1,7 @@
 /// <reference types="vitest" />
 import { act, renderHook } from '@testing-library/react';
 import { createElement } from 'react';
-import { MemoryRouter, useSearchParams } from 'react-router-dom';
+import { MemoryRouter, useSearchParams } from 'react-router';
 import { describe, expect, it } from 'vitest';
 import useParamState from './useParamState';
 // Creates a MemoryRouter wrapper using createElement to avoid JSX in a .ts file

package/components/hooks/useRecordSelection.d.ts

@@ -1,8 +1,9 @@
+import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type React from 'react';
 declare const useRecordSelection: () => {
-    lastSelected: string;
-    setLastSelected: React.Dispatch<React.SetStateAction<string>>;
-    onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
+    lastSelected: string | null;
+    setLastSelected: React.Dispatch<React.SetStateAction<string | null>>;
+    onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit | Event) => void;
 };
 export default useRecordSelection;

package/components/hooks/useRecordSelection.js

@@ -14,7 +14,7 @@ const useRecordSelection = () => {
     const onClick = useCallback((e, hit) => {
         setLastSelected(hit.howler.id);
         if (e.ctrlKey) {
-            document.getSelection().removeAllRanges();
+            document.getSelection()?.removeAllRanges();
             if (selectedHits.some(_hit => _hit.howler.id === hit.howler.id)) {
                 removeHitFromSelection(hit.howler.id);
             }
@@ -25,17 +25,17 @@ const useRecordSelection = () => {
             return;
         }
         if (e.shiftKey) {
-            document.getSelection().removeAllRanges();
+            document.getSelection()?.removeAllRanges();
             if (selectedHits.length < 1) {
                 addHitToSelection(hit.howler.id);
             }
             else if (lastSelected) {
-                const lastSelectedIndex = response?.items.findIndex(_hit => _hit.howler.id === lastSelected);
-                const currentIndex = response?.items.findIndex(_hit => _hit.howler.id === hit.howler.id);
+                const lastSelectedIndex = response.items.findIndex(_hit => _hit.howler.id === lastSelected);
+                const currentIndex = response.items.findIndex(_hit => _hit.howler.id === hit.howler.id);
                 const lowerBound = lastSelectedIndex < currentIndex ? lastSelectedIndex : currentIndex;
                 const upperBound = lastSelectedIndex > currentIndex ? lastSelectedIndex : currentIndex;
                 for (let i = lowerBound; i <= upperBound; i++) {
-                    addHitToSelection(response.items[i]?.howler.id);
+                    addHitToSelection(response.items[i].howler.id);
                 }
             }
             e.stopPropagation();

package/components/hooks/useScrollRestoration.js

@@ -5,7 +5,7 @@
  * Possible this won't work on a remix project.
  */
 import { useLayoutEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 const getScrollPosition = (key) => {
     const pos = window.sessionStorage.getItem(key);
     return Number(pos) || 0;
@@ -24,9 +24,9 @@ export const useScrollRestoration = (element = 'app-scrollct') => {
     const key = `scroll-position-${useLocation().key}`;
     //set scroll position on mount, save scroll position on unmount
     useLayoutEffect(() => {
-        document.getElementById(element).scrollTo(0, getScrollPosition(key));
+        document.getElementById(element)?.scrollTo(0, getScrollPosition(key));
         return () => {
-            setScrollPosition(key, document.getElementById(element).scrollTop ?? 0);
+            setScrollPosition(key, document.getElementById(element)?.scrollTop ?? 0);
         };
     }, [element, key]);
 };

package/components/logins/Login.d.ts

@@ -1,2 +1,2 @@
-declare const LoginScreen: () => import("react/jsx-runtime").JSX.Element;
+declare const LoginScreen: () => import("react").JSX.Element;
 export default LoginScreen;

package/components/logins/Login.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CircularProgress, Container, Stack, styled } from '@mui/material';
-import { useAppBanner } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import PageCardCentered from '@cccsaurora/howler-ui/commons/components/pages/PageCardCentered';
+import { PageCardCentered } from '@tui/core';
+import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import TextDivider from '@cccsaurora/howler-ui/components/elements/display/TextDivider';
 import { useContext } from 'react';
@@ -24,9 +24,7 @@ const InjectCss = styled(Stack)(({ theme }) => ({
     }
 }));
 const LoginScreen = () => {
-    const banner = useAppBanner();
-    const { config } = useContext(ApiConfigContext);
-    const loading = config.configuration === null;
-    return (_jsx(Container, { component: "main", maxWidth: "xs", children: _jsx(InjectCss, { direction: "column", alignItems: "center", children: _jsx(PageCardCentered, { children: _jsxs(LogWrap, { children: [banner, _jsx(Box, { m: 2 }), loading && (_jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: _jsx(CircularProgress, {}) })), config.configuration?.auth?.internal?.enabled && (_jsxs(_Fragment, { children: [_jsx(UserPassLogin, {}), config.configuration?.auth?.oauth_providers?.length > 0 && _jsx(TextDivider, {})] })), config.configuration?.auth?.oauth_providers?.length > 0 && (_jsx(OAuthLogin, { providers: config.configuration?.auth?.oauth_providers }))] }) }) }) }));
+    const { config, loaded } = useContext(ApiConfigContext);
+    return (_jsx(Container, { component: "main", maxWidth: "xs", children: _jsx(InjectCss, { direction: "column", alignItems: "center", children: _jsx(PageCardCentered, { children: _jsxs(LogWrap, { children: [_jsx(AppBrand, { application: "howler", variant: "banner-vertical", size: "large" }), _jsx(Box, { m: 2 }), !loaded ? (_jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: _jsx(CircularProgress, {}) })) : (_jsxs(_Fragment, { children: [config.configuration?.auth?.internal?.enabled && (_jsxs(_Fragment, { children: [_jsx(UserPassLogin, {}), !!config.configuration?.auth?.oauth_providers?.length && _jsx(TextDivider, {})] })), !!config.configuration?.auth?.oauth_providers?.length && (_jsx(OAuthLogin, { providers: config.configuration?.auth?.oauth_providers }))] }))] }) }) }) }));
 };
 export default LoginScreen;

package/components/logins/auth/OAuthLogin.js

@@ -4,7 +4,7 @@ import api from '@cccsaurora/howler-ui/api';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import useLogin from '../hooks/useLogin';
 const OAuthLogin = ({ providers }) => {

package/components/logins/auth/UserPassLogin.d.ts

@@ -1,2 +1,2 @@
-declare const UserPassLogin: () => import("react/jsx-runtime").JSX.Element;
+declare const UserPassLogin: () => import("react").JSX.Element;
 export default UserPassLogin;

package/components/logins/hooks/useLogin.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppUser } from '@tui/core';
 import api, {} from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import LoginErrorModal from '@cccsaurora/howler-ui/components/elements/display/modals/LoginErrorModal';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
@@ -8,7 +8,7 @@ import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocal
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { useCallback, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { useLocation, useNavigate, useSearchParams } from 'react-router';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { saveLoginCredential } from '@cccsaurora/howler-ui/utils/localStorage';
 const useLogin = () => {
@@ -34,12 +34,12 @@ const useLogin = () => {
                 });
                 // Either navigate to the original URL, or just the home page
                 if (get(StorageKey.NEXT_LOCATION)) {
-                    navigate(get(StorageKey.NEXT_LOCATION) + (get(StorageKey.NEXT_SEARCH) ?? ''));
+                    void navigate(get(StorageKey.NEXT_LOCATION) + (get(StorageKey.NEXT_SEARCH) ?? ''));
                     remove(StorageKey.NEXT_LOCATION);
                     remove(StorageKey.NEXT_SEARCH);
                 }
                 else if (location.pathname === '/login') {
-                    navigate('/');
+                    void navigate('/');
                 }
                 // If the user is null but there's no exception?
             }
@@ -52,7 +52,7 @@ const useLogin = () => {
             // There's some sort of error with the getting of the user - log them out or throw an error
             if (e instanceof Error) {
                 if (e.cause?.api_status_code === 403) {
-                    navigate('/logout');
+                    void navigate('/logout');
                 }
                 else {
                     showModal(_jsx(LoginErrorModal, { error: e }), {
@@ -76,10 +76,14 @@ const useLogin = () => {
     // OAuth login flow.
     const doOAuth = useCallback(async () => {
         const userCredential = await dispatchApi(api.auth.login.get(searchParams));
+        if (!userCredential) {
+            showErrorMessage(t('user.login.failed'));
+            return;
+        }
         if (saveLoginCredential(userCredential)) {
             void getUser();
         }
-    }, [dispatchApi, searchParams, getUser]);
+    }, [dispatchApi, getUser, searchParams, showErrorMessage, t]);
     // login service.
     return useMemo(() => ({
         doLogin,

package/components/routes/403.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageCenter } from '@tui/core';
 import { PersonOff } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { useTranslation } from 'react-i18next';
 const PermissionDeniedPage = () => {
     const { t } = useTranslation();

package/components/routes/403.test.js

@@ -5,9 +5,13 @@ import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
 import { describe, expect, it, vi } from 'vitest';
 import PermissionDeniedPage from './403';
-vi.mock('commons/components/pages/PageCenter', () => ({
-    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
-}));
+vi.mock('@tui/core', async () => {
+    const actual = await vi.importActual('@tui/core');
+    return {
+        ...actual,
+        PageCenter: ({ children }) => _jsx("div", { id: "page-center", children: children })
+    };
+});
 const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
 describe('PermissionDeniedPage (403)', () => {
     it('should render the 403 title and description', () => {

package/components/routes/404.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageCenter } from '@tui/core';
 import { LinkOff } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { useTranslation } from 'react-i18next';
 const NotFoundPage = () => {
     const { t } = useTranslation();

package/components/routes/404.test.js

@@ -5,9 +5,13 @@ import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
 import { describe, expect, it, vi } from 'vitest';
 import NotFoundPage from './404';
-vi.mock('commons/components/pages/PageCenter', () => ({
-    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
-}));
+vi.mock('@tui/core', async () => {
+    const actual = await vi.importActual('@tui/core');
+    return {
+        ...actual,
+        PageCenter: ({ children }) => _jsx("div", { id: "page-center", children: children })
+    };
+});
 const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
 describe('NotFoundPage (404)', () => {
     it('should render the 404 title and description', () => {

package/components/routes/ErrorBoundary.d.ts

@@ -1,3 +1,3 @@
-import { type PropsWithChildren } from 'react';
-declare const ErrorBoundary: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+import React, { type PropsWithChildren } from 'react';
+declare const ErrorBoundary: ({ children }: PropsWithChildren) => React.JSX.Element;
 export default ErrorBoundary;

package/components/routes/ErrorBoundary.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExpandMore } from '@mui/icons-material';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material';
 import React, {} from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import ErrorOccured from './ErrorOccured';
 class ErrorBoundaryComponent extends React.Component {
     constructor(props) {
@@ -22,7 +22,7 @@ class ErrorBoundaryComponent extends React.Component {
     }
     render() {
         if (this.state.hasError) {
-            return (_jsxs(Box, { pt: 6, textAlign: "center", fontSize: 20, children: [_jsx(ErrorOccured, {}), _jsxs(Accordion, { elevation: 0, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), "aria-controls": "panel1-content", id: "panel1-header", children: _jsx(Typography, { align: "center", sx: { width: '100%', fontSize: '1.2rem' }, variant: "h5", children: this.state.error.message }) }), _jsx(AccordionDetails, { children: _jsx("code", { children: _jsx(Typography, { variant: "h6", children: this.state.error.stack }) }) })] })] }));
+            return (_jsxs(Box, { pt: 6, textAlign: "center", fontSize: 20, children: [_jsx(ErrorOccured, {}), _jsxs(Accordion, { elevation: 0, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), "aria-controls": "panel1-content", id: "panel1-header", children: _jsx(Typography, { align: "center", sx: { width: '100%', fontSize: '1.2rem' }, variant: "h5", children: this.state.error?.message }) }), _jsx(AccordionDetails, { children: _jsx("code", { children: _jsx(Typography, { variant: "h6", children: this.state.error?.stack }) }) })] })] }));
         }
         return this.props.children;
     }

package/components/routes/ErrorBoundary.test.js

@@ -4,12 +4,9 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
-import { MemoryRouter, useLocation, useNavigate } from 'react-router-dom';
+import { MemoryRouter, useLocation, useNavigate } from 'react-router';
 import { describe, expect, it, vi } from 'vitest';
 import ErrorBoundary from './ErrorBoundary';
-vi.mock('commons/components/pages/PageCenter', () => ({
-    default: ({ children }) => _jsx("div", { id: "page-center", children: children })
-}));
 vi.mock('react-pluggable', () => ({
     usePluginStore: () => ({
         executeFunction: vi.fn(() => null)

package/components/routes/ErrorOccured.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageCenter } from '@tui/core';
 import { Error } from '@mui/icons-material';
 import { Box, Typography } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';