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

package/components/app/App.js

@@ -1,14 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppAccessibilityProvider } from '@tui/a11y';
+import { AppSwitcherProvider, useAppSwitcher } from '@tui/apps';
+import { AppProvider, AppRoot, LayoutSkeleton, parseTuiClientCookies, TUI_THEMES, useAppLayout, useAppUser } from '@tui/core';
+import { AppDrawerProvider as TuiAppDrawerProvider } from '@tui/drawer';
 import { loader } from '@monaco-editor/react';
+import { Article, Book, BookRounded, Code, CreateNewFolder, Dashboard, Description, Edit, EditNote, FormatListBulleted, Help, Info, Key, Person, PersonSearch, QueryStats, SavedSearch, Search, Settings as SettingsIcon, SettingsSuggest, Shield, Storage, Terminal, Topic } from '@mui/icons-material';
 import api from '@cccsaurora/howler-ui/api';
-import AppProvider from '@cccsaurora/howler-ui/commons/components/app/AppProvider';
-import LayoutSkeleton from '@cccsaurora/howler-ui/commons/components/app/AppSkeleton';
-import { useAppLayout, useAppSwitcher, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import Modal from '@cccsaurora/howler-ui/components/elements/display/Modal';
+import { useMyAccessibility } from '@cccsaurora/howler-ui/components/hooks/useMyAccessibility';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { APP_COOKIES_DEFAULTS } from '@cccsaurora/howler-ui/components/hooks/useMyCookies';
 import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyPreferences from '@cccsaurora/howler-ui/components/hooks/useMyPreferences';
-import useMySitemap from '@cccsaurora/howler-ui/components/hooks/useMySitemap';
+import { useMyRouter } from '@cccsaurora/howler-ui/components/hooks/useMyRouter';
 import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
 import useMyUser from '@cccsaurora/howler-ui/components/hooks/useMyUser';
 import LoginScreen from '@cccsaurora/howler-ui/components/logins/Login';
@@ -71,7 +75,7 @@ import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useCallback, useContext, useEffect, useMemo } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { PluginProvider, usePluginStore } from 'react-pluggable';
-import { createBrowserRouter, Outlet, RouterProvider, useLocation, useNavigate } from 'react-router-dom';
+import { createBrowserRouter, Outlet, RouterProvider, useLocation, useNavigate } from 'react-router';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import useMySearch from '../hooks/useMySearch';
 import AppContainer from './AppContainer';
@@ -130,8 +134,11 @@ const MyApp = () => {
     // e.g. fetching initial app data, etc.
     useEffect(() => {
         void dispatchApi(api.configs.get()).then(data => {
+            if (!data) {
+                return;
+            }
             apiConfig.setConfig(data);
-            if (data?.configuration?.ui?.apps) {
+            if (data.configuration.ui?.apps) {
                 setItems(data.configuration.ui.apps);
             }
         });
@@ -151,7 +158,7 @@ const MyApp = () => {
             if (location.pathname !== '/login') {
                 set(StorageKey.NEXT_LOCATION, location.pathname);
                 set(StorageKey.NEXT_SEARCH, location.search);
-                navigate('/login');
+                void navigate('/login');
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -160,21 +167,41 @@ const MyApp = () => {
         pluginStore.executeFunction(`${plugin}.setup`)?.();
     }
     // we don't display the skeleton for certain paths
-    return (appLayout.ready && apiConfig.config?.indexes) ||
+    return (appLayout.ready && apiConfig.loaded && apiConfig.config.indexes) ||
         location.pathname === '/login' ||
         location.pathname === '/logout' ? (_jsx(AppContainer, {})) : (_jsx(LayoutSkeleton, {}));
 };
 const MyAppProvider = ({ children }) => {
     const myPreferences = useMyPreferences();
-    const myTheme = useMyTheme();
-    const mySitemap = useMySitemap();
     const myUser = useMyUser();
     const mySearch = useMySearch();
-    return (_jsx(ErrorBoundary, { children: _jsx(AppProvider, { preferences: myPreferences, theme: myTheme, sitemap: mySitemap, user: myUser, search: mySearch, children: _jsx(CustomPluginProvider, { children: _jsx(ErrorBoundary, { children: _jsx(ErrorBoundary, { children: _jsx(ViewProvider, { children: _jsx(AvatarProvider, { children: _jsx(ModalProvider, { children: _jsx(FieldProvider, { children: _jsx(LocalStorageProvider, { children: _jsx(SocketProvider, { children: _jsx(RecordProvider, { children: _jsx(OverviewProvider, { children: _jsx(AnalyticProvider, { children: _jsx(FavouriteProvider, { children: _jsx(UserListProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    const myRouter = useMyRouter();
+    return (_jsx(ErrorBoundary, { children: _jsx(AppProvider, { preferences: myPreferences, user: myUser, search: mySearch, router: myRouter, children: _jsx(CustomPluginProvider, { children: _jsx(ErrorBoundary, { children: _jsx(ErrorBoundary, { children: _jsx(ViewProvider, { children: _jsx(AvatarProvider, { children: _jsx(ModalProvider, { children: _jsx(FieldProvider, { children: _jsx(LocalStorageProvider, { children: _jsx(SocketProvider, { children: _jsx(RecordProvider, { children: _jsx(OverviewProvider, { children: _jsx(AnalyticProvider, { children: _jsx(FavouriteProvider, { children: _jsx(UserListProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 const AppProviderWrapper = () => {
-    return (_jsx(I18nextProvider, { i18n: i18n, defaultNS: "translation", children: _jsx(ApiConfigProvider, { children: _jsx(PluginProvider, { pluginStore: howlerPluginStore.pluginStore, children: _jsx(AppBarProvider, { children: _jsxs(MyAppProvider, { children: [_jsx(MyApp, {}), _jsx(Modal, {})] }) }) }) }) }));
+    const myTheme = useMyTheme();
+    const myAccessibility = useMyAccessibility();
+    const myThemes = useMemo(() => [
+        { id: 'howler', i18nKey: 'route.home.title', configs: myTheme, default: true },
+        ...TUI_THEMES.filter(theme => theme.id !== 'howler')
+    ], [myTheme]);
+    const tuiCookies = useMemo(() => parseTuiClientCookies(APP_COOKIES_DEFAULTS), []);
+    return (_jsx(I18nextProvider, { i18n: i18n, defaultNS: "translation", children: _jsx(ApiConfigProvider, { children: _jsx(PluginProvider, { pluginStore: howlerPluginStore.pluginStore, children: _jsx(AppBarProvider, { children: _jsx(AppRoot, { i18n: i18n, cookies: tuiCookies, themes: myThemes, children: _jsx(TuiAppDrawerProvider, { children: _jsx(AppAccessibilityProvider, { preferences: myAccessibility.preferences, features: myAccessibility.features, children: _jsx(AppSwitcherProvider, { children: _jsxs(MyAppProvider, { children: [_jsx(MyApp, {}), _jsx(Modal, {})] }) }) }) }) }) }) }) }) }));
 };
+// Static breadcrumb entry for a known route.
+const crumb = (path, i18nKey, icon) => ({
+    route: path,
+    path,
+    i18nKey,
+    icon
+});
+// Breadcrumb entry for the currently matched (possibly dynamic) route.
+const selfCrumb = (match, i18nKey, icon) => ({
+    route: match.pathname,
+    path: match.pathname,
+    i18nKey,
+    icon
+});
 const createRouter = () => createBrowserRouter([
     {
         path: '/',
@@ -190,27 +217,43 @@ const createRouter = () => createBrowserRouter([
             },
             {
                 index: true,
-                element: _jsx(Home, {})
+                element: _jsx(Home, {}),
+                handle: { breadcrumb: () => [crumb('/', 'route.home', _jsx(Dashboard, {}))] }
             },
             {
                 path: 'hits',
-                element: _jsx(RecordBrowser, {})
+                element: _jsx(RecordBrowser, {}),
+                handle: { breadcrumb: () => [crumb('/hits', 'route.hits', _jsx(Search, {}))] }
             },
             {
                 path: 'search',
-                element: _jsx(RecordBrowser, {})
+                element: _jsx(RecordBrowser, {}),
+                handle: { breadcrumb: () => [crumb('/search', 'route.search', _jsx(Search, {}))] }
             },
             {
                 path: 'hits/:id',
-                element: _jsx(HitViewer, {})
+                element: _jsx(HitViewer, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/hits', 'route.hits', _jsx(Search, {})),
+                        selfCrumb(match, 'route.hits.view', _jsx(Info, {}))
+                    ]
+                }
             },
             {
                 path: 'cases',
-                element: _jsx(Cases, {})
+                element: _jsx(Cases, {}),
+                handle: { breadcrumb: () => [crumb('/cases', 'route.cases', _jsx(BookRounded, {}))] }
             },
             {
                 path: 'cases/:id',
                 element: (_jsx(ParameterProvider, { defaults: { query: '', indexes: ['hit', 'event', 'case'] }, children: _jsx(CaseViewer, {}) })),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/cases', 'route.cases', _jsx(BookRounded, {})),
+                        selfCrumb(match, 'route.cases.view')
+                    ]
+                },
                 children: [
                     {
                         index: true,
@@ -240,119 +283,248 @@ const createRouter = () => createBrowserRouter([
             },
             {
                 path: 'templates',
-                element: _jsx(Templates, {})
+                element: _jsx(Templates, {}),
+                handle: {
+                    breadcrumb: () => [crumb('/templates', 'route.templates', _jsx(FormatListBulleted, {}))]
+                }
             },
             {
                 path: 'templates/view',
-                element: _jsx(TemplateViewer, {})
+                element: _jsx(TemplateViewer, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/templates', 'route.templates', _jsx(FormatListBulleted, {})),
+                        selfCrumb(match, 'route.templates.view', _jsx(FormatListBulleted, {}))
+                    ]
+                }
             },
             {
                 path: 'overviews',
-                element: _jsx(Overviews, {})
+                element: _jsx(Overviews, {}),
+                handle: { breadcrumb: () => [crumb('/overviews', 'route.overviews', _jsx(Article, {}))] }
             },
             {
                 path: 'overviews/view',
-                element: _jsx(OverviewViewer, {})
+                element: _jsx(OverviewViewer, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/overviews', 'route.overviews', _jsx(Article, {})),
+                        selfCrumb(match, 'route.overviews.view', _jsx(Article, {}))
+                    ]
+                }
             },
             {
                 path: 'dossiers',
-                element: _jsx(Dossiers, {})
+                element: _jsx(Dossiers, {}),
+                handle: { breadcrumb: () => [crumb('/dossiers', 'route.dossiers', _jsx(Topic, {}))] }
             },
             {
                 path: 'dossiers/create',
-                element: (_jsx(ParameterProvider, { children: _jsx(DossierEditor, {}) }))
+                element: (_jsx(ParameterProvider, { children: _jsx(DossierEditor, {}) })),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/dossiers', 'route.dossiers', _jsx(Topic, {})),
+                        selfCrumb(match, 'route.dossiers.create', _jsx(CreateNewFolder, {}))
+                    ]
+                }
             },
             {
                 path: 'dossiers/:id/edit',
-                element: (_jsx(ParameterProvider, { children: _jsx(DossierEditor, {}) }))
+                element: (_jsx(ParameterProvider, { children: _jsx(DossierEditor, {}) })),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/dossiers', 'route.dossiers', _jsx(Topic, {})),
+                        selfCrumb(match, 'route.dossiers.edit', _jsx(Edit, {}))
+                    ]
+                }
             },
             {
                 path: 'views',
-                element: _jsx(Views, {})
+                element: _jsx(Views, {}),
+                handle: { breadcrumb: () => [crumb('/views', 'route.views', _jsx(SavedSearch, {}))] }
             },
             {
                 path: 'views/create',
-                element: (_jsx(ParameterProvider, { children: _jsx(RecordSearchProvider, { children: _jsx(GridColumnsProvider, { viewSource: "path", children: _jsx(ViewComposer, {}) }) }) }))
+                element: (_jsx(ParameterProvider, { children: _jsx(RecordSearchProvider, { children: _jsx(GridColumnsProvider, { viewSource: "path", children: _jsx(ViewComposer, {}) }) }) })),
+                handle: {
+                    breadcrumb: () => [crumb('/views/create', 'route.views.create', _jsx(SavedSearch, {}))]
+                }
             },
             {
                 path: 'views/:id',
-                element: _jsx(RecordBrowser, {})
+                element: _jsx(RecordBrowser, {}),
+                handle: {
+                    breadcrumb: (match) => [selfCrumb(match, 'route.views.show', _jsx(SavedSearch, {}))]
+                }
             },
             {
                 path: 'views/:id/edit',
-                element: (_jsx(ParameterProvider, { children: _jsx(RecordSearchProvider, { children: _jsx(GridColumnsProvider, { viewSource: "path", children: _jsx(ViewComposer, {}) }) }) }))
+                element: (_jsx(ParameterProvider, { children: _jsx(RecordSearchProvider, { children: _jsx(GridColumnsProvider, { viewSource: "path", children: _jsx(ViewComposer, {}) }) }) })),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/views', 'route.views', _jsx(SavedSearch, {})),
+                        selfCrumb(match, 'route.views.edit', _jsx(Edit, {}))
+                    ]
+                }
             },
             {
                 path: 'admin/users',
-                element: _jsx(UserSearchProvider, {})
+                element: _jsx(UserSearchProvider, {}),
+                handle: {
+                    breadcrumb: () => [crumb('/admin/users', 'route.admin.user.search', _jsx(PersonSearch, {}))]
+                }
             },
             {
                 path: 'admin/users/:id',
-                element: _jsx(UserEditor, {})
+                element: _jsx(UserEditor, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/admin/users', 'route.admin.user.search', _jsx(PersonSearch, {})),
+                        selfCrumb(match, 'route.admin.user.details', _jsx(Person, {}))
+                    ]
+                }
             },
             {
                 path: 'analytics',
-                element: _jsx(AnalyticSearch, {})
+                element: _jsx(AnalyticSearch, {}),
+                handle: { breadcrumb: () => [crumb('/analytics', 'route.analytics', _jsx(QueryStats, {}))] }
             },
             {
                 path: 'analytics/:id',
-                element: _jsx(AnalyticDetails, {})
+                element: _jsx(AnalyticDetails, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/analytics', 'route.analytics', _jsx(QueryStats, {})),
+                        selfCrumb(match, 'route.analytics.view', _jsx(Info, {}))
+                    ]
+                }
             },
             {
                 path: 'help',
-                element: _jsx(HelpDashboard, {})
+                element: _jsx(HelpDashboard, {}),
+                handle: { breadcrumb: () => [crumb('/help', 'route.help', _jsx(Help, {}))] }
             },
             {
                 path: 'help/search',
-                element: _jsx(SearchDocumentation, {})
+                element: _jsx(SearchDocumentation, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/help', 'route.help', _jsx(Help, {})),
+                        selfCrumb(match, 'route.help.search', _jsx(Search, {}))
+                    ]
+                }
             },
             {
                 path: 'help/api',
-                element: _jsx(ApiDocumentation, {})
+                element: _jsx(ApiDocumentation, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/help', 'route.help', _jsx(Help, {})),
+                        selfCrumb(match, 'route.help.api', _jsx(Storage, {}))
+                    ]
+                }
             },
             {
                 path: 'help/auth',
-                element: _jsx(AuthDocumentation, {})
+                element: _jsx(AuthDocumentation, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/help', 'route.help', _jsx(Help, {})),
+                        selfCrumb(match, 'route.help.auth', _jsx(Key, {}))
+                    ]
+                }
             },
             {
                 path: 'help/client',
-                element: _jsx(ClientDocumentation, {})
+                element: _jsx(ClientDocumentation, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/help', 'route.help', _jsx(Help, {})),
+                        selfCrumb(match, 'route.help.client', _jsx(Terminal, {}))
+                    ]
+                }
             },
             {
                 path: 'help/hit',
-                element: _jsx(HitDocumentation, {})
+                element: _jsx(HitDocumentation, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/help', 'route.help', _jsx(Help, {})),
+                        selfCrumb(match, 'route.help.hit', _jsx(Shield, {}))
+                    ]
+                }
             },
             {
                 path: 'help/retention',
-                element: _jsx(RetentionDocumentation, {})
+                element: _jsx(RetentionDocumentation, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/help', 'route.help', _jsx(Help, {})),
+                        selfCrumb(match, 'route.help.retention', _jsx(Book, {}))
+                    ]
+                }
             },
             {
                 path: 'help/templates',
-                element: _jsx(TemplateDocumentation, {})
+                element: _jsx(TemplateDocumentation, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/help', 'route.help', _jsx(Help, {})),
+                        selfCrumb(match, 'route.help.templates', _jsx(FormatListBulleted, {}))
+                    ]
+                }
             },
             {
                 path: 'help/actions',
-                element: _jsx(ActionDocumentation, {})
+                element: _jsx(ActionDocumentation, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/help', 'route.help', _jsx(Help, {})),
+                        selfCrumb(match, 'route.help.actions', _jsx(SettingsSuggest, {}))
+                    ]
+                }
             },
             {
                 path: 'help/notebook',
-                element: _jsx(NotebookDocumentation, {})
+                element: _jsx(NotebookDocumentation, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/help', 'route.help', _jsx(Help, {})),
+                        selfCrumb(match, 'route.help.notebook', _jsx(Description, {}))
+                    ]
+                }
             },
             {
                 path: 'help/overviews',
-                element: _jsx(OverviewDocumentation, {})
+                element: _jsx(OverviewDocumentation, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/help', 'route.help', _jsx(Help, {})),
+                        selfCrumb(match, 'route.help.overviews', _jsx(Article, {}))
+                    ]
+                }
             },
             {
                 path: 'help/views',
-                element: _jsx(ViewDocumentation, {})
+                element: _jsx(ViewDocumentation, {}),
+                handle: {
+                    breadcrumb: (match) => [
+                        crumb('/help', 'route.help', _jsx(Help, {})),
+                        selfCrumb(match, 'route.help.views', _jsx(SavedSearch, {}))
+                    ]
+                }
             },
             {
                 path: 'settings',
-                element: _jsx(Settings, {})
+                element: _jsx(Settings, {}),
+                handle: {
+                    breadcrumb: () => [crumb('/settings', 'page.settings.sitemap', _jsx(SettingsIcon, {}))]
+                }
             },
             {
                 path: 'advanced',
-                element: _jsx(QueryBuilder, {})
+                element: _jsx(QueryBuilder, {}),
+                handle: { breadcrumb: () => [crumb('/advanced', 'route.advanced', _jsx(Code, {}))] }
             },
             {
                 path: 'action',
@@ -366,26 +538,51 @@ const createRouter = () => createBrowserRouter([
                 children: [
                     {
                         index: true,
-                        element: _jsx(ActionSearchProvider, {})
+                        element: _jsx(ActionSearchProvider, {}),
+                        handle: { breadcrumb: () => [crumb('/action', 'route.actions', _jsx(Terminal, {}))] }
                     },
                     {
                         path: 'integrations',
-                        element: _jsx(Integrations, {})
+                        element: _jsx(Integrations, {}),
+                        handle: {
+                            breadcrumb: (match) => [
+                                crumb('/action', 'route.actions', _jsx(Terminal, {})),
+                                selfCrumb(match, 'route.integrations')
+                            ]
+                        }
                     },
                     {
                         path: 'execute',
-                        element: (_jsx(ParameterProvider, { children: _jsx(ActionEditor, {}) }))
+                        element: (_jsx(ParameterProvider, { children: _jsx(ActionEditor, {}) })),
+                        handle: {
+                            breadcrumb: (match) => [
+                                crumb('/action', 'route.actions', _jsx(Terminal, {})),
+                                selfCrumb(match, 'route.actions.create', _jsx(EditNote, {}))
+                            ]
+                        }
                     },
                     {
                         path: ':id',
                         children: [
                             {
                                 index: true,
-                                element: _jsx(ActionDetails, {})
+                                element: _jsx(ActionDetails, {}),
+                                handle: {
+                                    breadcrumb: (match) => [
+                                        crumb('/action', 'route.actions', _jsx(Terminal, {})),
+                                        selfCrumb(match, 'route.actions.view')
+                                    ]
+                                }
                             },
                             {
                                 path: 'edit',
-                                element: (_jsx(ParameterProvider, { children: _jsx(ActionEditor, {}) }))
+                                element: (_jsx(ParameterProvider, { children: _jsx(ActionEditor, {}) })),
+                                handle: {
+                                    breadcrumb: (match) => [
+                                        crumb('/action', 'route.actions', _jsx(Terminal, {})),
+                                        selfCrumb(match, 'route.actions.edit', _jsx(Edit, {}))
+                                    ]
+                                }
                             }
                         ]
                     }

package/components/app/AppContainer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import FlexVertical from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexVertical';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 import useTitle from './hooks/useTitle';
 import AppDrawerProvider from './providers/AppDrawerProvider';
 const AppContainer = () => {

package/components/app/drawers/ApiKeyDrawer.js

@@ -22,8 +22,8 @@ const ApiKeyDrawer = ({ onCreated }) => {
         if (!config) {
             return [1, 'seconds'];
         }
-        const { max_apikey_duration_amount: _amount, max_apikey_duration_unit: _unit } = config.configuration.auth;
-        return [_amount, _unit];
+        const { max_apikey_duration_amount: _amount, max_apikey_duration_unit: _unit } = config.configuration?.auth ?? {};
+        return [_amount ?? 1, _unit];
     }, [config]);
     const maxDate = useMemo(() => {
         if (!amount || !unit) {
@@ -47,12 +47,20 @@ const ApiKeyDrawer = ({ onCreated }) => {
         setKeyName(ev.target.value);
     }, []);
     const onSubmit = useCallback(async () => {
-        const result = await dispatchApi(api.auth.apikey.post(keyName, privs, expiryDate?.toISOString()), {
+        if (!expiryDate) {
+            return;
+        }
+        const expiryDateString = expiryDate.toISOString();
+        const result = await dispatchApi(api.auth.apikey.post(keyName, privs, expiryDateString), {
             throwError: true,
             showError: true
         });
+        if (!result) {
+            return;
+        }
+        const newKeyName = result.apikey.split(':')[0] || keyName;
         setCreatedKey(result.apikey);
-        onCreated(result.apikey.split(':')[0], privs, expiryDate.toISOString(), result.apikey);
+        onCreated(newKeyName, privs, expiryDateString, result.apikey);
     }, [dispatchApi, expiryDate, keyName, onCreated, privs]);
     const onCopy = useCallback(async () => {
         await navigator.clipboard.writeText(createdKey);
@@ -61,6 +69,6 @@ const ApiKeyDrawer = ({ onCreated }) => {
     useEffect(() => {
         setExpiryDate(maxDate);
     }, [maxDate]);
-    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "column", spacing: 2, sx: { mt: 2 }, children: [_jsx(Typography, { sx: { maxWidth: '500px' }, children: _jsx(Trans, { i18nKey: "app.drawer.user.apikey.description" }) }), amount && unit && dayjs.duration(amount, unit).asSeconds() < dayjs.duration(7, 'days').asSeconds() && (_jsxs(Alert, { severity: "warning", variant: "outlined", sx: { maxWidth: '500px' }, children: [_jsx(AlertTitle, { children: t('app.drawer.user.apikey.limit.title') }), t('app.drawer.user.apikey.limit.description'), " (", maxDate?.format('MMM D HH:mm:ss'), ")"] })), _jsx(TextField, { label: t('app.drawer.user.apikey.field.name'), required: true, fullWidth: true, value: keyName, onChange: onChange }), _jsxs(FormControl, { required: true, children: [_jsx(FormLabel, { component: "legend", children: t('app.drawer.user.apikey.permissions') }), _jsxs(FormGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: updatePrivs('R') }), label: t('apikey.read') }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: updatePrivs('W') }), label: t('apikey.write') }), _jsx(FormControlLabel, { disabled: privs.includes('E'), control: _jsx(Checkbox, { onChange: updatePrivs('I') }), label: t('apikey.impersonate') }), config.configuration.auth.allow_extended_apikeys && (_jsx(FormControlLabel, { disabled: privs.includes('I'), control: _jsx(Checkbox, { onChange: updatePrivs('E') }), label: t('apikey.extended') }))] })] }), _jsxs(FormControl, { required: !!maxDate, children: [_jsx(FormLabel, { children: t('app.drawer.user.apikey.expiry.date') }), _jsx(StaticDateTimePicker, { orientation: "landscape", ampm: false, value: expiryDate, onChange: newValue => setExpiryDate(newValue), disablePast: true, maxDate: maxDate, maxTime: maxDate, sx: { backgroundColor: 'transparent', '& > div:first-of-type': { maxWidth: '300px' } } })] }), _jsx(Button, { onClick: onSubmit, disabled: !keyName || (!privs.includes('R') && !privs.includes('W')) || (maxDate && !expiryDate), variant: "outlined", children: _jsx(Trans, { i18nKey: "button.create" }) }), createdKey && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "horizontal" }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "stretch", children: [_jsx(TextField, { size: "small", value: createdKey, inputProps: { readOnly: true }, fullWidth: true }), _jsx(Button, { variant: "outlined", onClick: onCopy, disabled: !createdKey, children: _jsx(Trans, { i18nKey: "button.copy" }) })] })] }))] }) }));
+    return (_jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: _jsxs(Stack, { direction: "column", spacing: 2, sx: { mt: 2 }, children: [_jsx(Typography, { sx: { maxWidth: '500px' }, children: _jsx(Trans, { i18nKey: "app.drawer.user.apikey.description" }) }), amount && unit && dayjs.duration(amount, unit).asSeconds() < dayjs.duration(7, 'days').asSeconds() && (_jsxs(Alert, { severity: "warning", variant: "outlined", sx: { maxWidth: '500px' }, children: [_jsx(AlertTitle, { children: t('app.drawer.user.apikey.limit.title') }), t('app.drawer.user.apikey.limit.description'), " (", maxDate?.format('MMM D HH:mm:ss'), ")"] })), _jsx(TextField, { label: t('app.drawer.user.apikey.field.name'), required: true, fullWidth: true, value: keyName, onChange: onChange }), _jsxs(FormControl, { required: true, children: [_jsx(FormLabel, { component: "legend", children: t('app.drawer.user.apikey.permissions') }), _jsxs(FormGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: updatePrivs('R') }), label: t('apikey.read') }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { onChange: updatePrivs('W') }), label: t('apikey.write') }), _jsx(FormControlLabel, { disabled: privs.includes('E'), control: _jsx(Checkbox, { onChange: updatePrivs('I') }), label: t('apikey.impersonate') }), config.configuration?.auth.allow_extended_apikeys && (_jsx(FormControlLabel, { disabled: privs.includes('I'), control: _jsx(Checkbox, { onChange: updatePrivs('E') }), label: t('apikey.extended') }))] })] }), _jsxs(FormControl, { required: !!maxDate, children: [_jsx(FormLabel, { children: t('app.drawer.user.apikey.expiry.date') }), _jsx(StaticDateTimePicker, { orientation: "landscape", ampm: false, value: expiryDate, onChange: newValue => setExpiryDate(newValue), disablePast: true, maxDate: maxDate ?? undefined, maxTime: maxDate ?? undefined, sx: { backgroundColor: 'transparent', '& > div:first-of-type': { maxWidth: '300px' } } })] }), _jsx(Button, { onClick: onSubmit, disabled: !keyName || (!privs.includes('R') && !privs.includes('W')) || !!(maxDate && !expiryDate), variant: "outlined", children: _jsx(Trans, { i18nKey: "button.create" }) }), createdKey && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: "horizontal" }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "stretch", children: [_jsx(TextField, { size: "small", value: createdKey, inputProps: { readOnly: true }, fullWidth: true }), _jsx(Button, { variant: "outlined", onClick: onCopy, disabled: !createdKey, children: _jsx(Trans, { i18nKey: "button.copy" }) })] })] }))] }) }));
 };
 export default ApiKeyDrawer;

package/components/app/drawers/AssignUserDrawer.js

@@ -1,3 +1,4 @@
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PersonOff } from '@mui/icons-material';
 import { Autocomplete, Avatar, Box, Button, CircularProgress, Stack, TextField, Typography } from '@mui/material';
@@ -17,10 +18,15 @@ const AssignUserDrawer = ({ assignment, ids, onAssigned, skipSubmit = false }) =
     const [assignedUserId, setAssignedUserId] = useState(assignment === 'unassigned' ? null : assignment);
     const [loading, setLoading] = useState(false);
     const onSubmit = useCallback(async () => {
+        if (!assignedUserId) {
+            return;
+        }
         if (!skipSubmit) {
             setLoading(true);
             try {
-                await Promise.all(ids.map(id => dispatchApi(api.hit.assign.put(id, { value: assignedUserId !== 'unassigned' ? assignedUserId : null }))));
+                await Promise.all(ids.map(id => dispatchApi(api.hit.assign.put(id, {
+                    value: assignedUserId === 'unassigned' ? null : assignedUserId
+                }))));
                 showInfoMessage(t('app.drawer.hit.assignment.success'));
             }
             finally {
@@ -38,13 +44,14 @@ const AssignUserDrawer = ({ assignment, ids, onAssigned, skipSubmit = false }) =
                     }
                 ], filterOptions: (_users, { inputValue }) => _users.filter(u => u.email.toLowerCase().includes(inputValue.toLowerCase()) ||
                     u.name.toLowerCase().includes(inputValue.toLowerCase())), onKeyDown: e => e.stopPropagation(), getOptionLabel: (u) => u.name, isOptionEqualToValue: (u, u2) => u.username === u2.username, renderOption: (props, u) => {
-                    return (_jsx("li", { ...props, children: _jsxs(Box, { sx: {
+                    return (_createElement("li", { ...props, key: u.email },
+                        _jsxs(Box, { sx: {
                                 display: 'grid',
                                 gridTemplateColumns: 'auto 1fr',
                                 gridTemplateRows: 'auto auto',
                                 gridTemplateAreas: `"profile name"\n"profile email"`,
                                 columnGap: 1.5
-                            }, children: [u.username !== 'unassigned' ? (_jsx(HowlerAvatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, userId: u.username })) : (_jsx(Avatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, children: _jsx(PersonOff, {}) })), _jsx(Typography, { sx: { gridArea: 'name' }, variant: "body1", children: u.name }), _jsx(Typography, { sx: { gridArea: 'email' }, variant: "caption", children: u.email })] }) }, u.email));
-                }, renderInput: params => (_jsx(TextField, { ...params, label: _jsx(Trans, { i18nKey: "app.drawer.hit.assignment.autocomplete.label" }) })), value: users[assignedUserId] ?? null, onChange: (_, value) => setAssignedUserId(value?.username) }), _jsxs(Button, { disabled: !assignedUserId || assignedUserId === assignment || loading, variant: "contained", sx: { alignSelf: 'end' }, onClick: onSubmit, children: [loading && _jsx(CircularProgress, { size: "24px", sx: { mr: 1 } }), _jsx(Trans, { i18nKey: "button.save" })] })] }));
+                            }, children: [u.username !== 'unassigned' ? (_jsx(HowlerAvatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, userId: u.username })) : (_jsx(Avatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, children: _jsx(PersonOff, {}) })), _jsx(Typography, { sx: { gridArea: 'name' }, variant: "body1", children: u.name }), _jsx(Typography, { sx: { gridArea: 'email' }, variant: "caption", children: u.email })] })));
+                }, renderInput: params => (_jsx(TextField, { ...params, label: _jsx(Trans, { i18nKey: "app.drawer.hit.assignment.autocomplete.label" }) })), value: assignedUserId ? (users[assignedUserId] ?? null) : null, onChange: (_, value) => setAssignedUserId(value?.username ?? null) }), _jsxs(Button, { disabled: !assignedUserId || assignedUserId === assignment || loading, variant: "contained", sx: { alignSelf: 'end' }, onClick: onSubmit, children: [loading && _jsx(CircularProgress, { size: "24px", sx: { mr: 1 } }), _jsx(Trans, { i18nKey: "button.save" })] })] }));
 };
 export default AssignUserDrawer;

package/components/app/hooks/useMatchers.d.ts

@@ -3,8 +3,8 @@ import type { Template } from '@cccsaurora/howler-ui/models/entities/generated/T
 import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
 declare const useMatchers: (lazy?: boolean) => {
     getMatchingDossiers: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Dossier").Dossier[]>;
-    getMatchingOverview: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Overview").Overview>;
-    getMatchingTemplate: (hit: WithMetadata<Hit>, providedTemplate?: Template) => Promise<Template>;
-    getMatchingAnalytic: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Analytic").Analytic>;
+    getMatchingOverview: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Overview").Overview | undefined>;
+    getMatchingTemplate: (hit: WithMetadata<Hit>, providedTemplate?: Template) => Promise<Template | undefined>;
+    getMatchingAnalytic: (hit: WithMetadata<Hit>) => Promise<import("../../../models/entities/generated/Analytic").Analytic | undefined>;
 };
 export default useMatchers;