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

package/components/routes/overviews/OverviewViewer.js

@@ -1,28 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Autocomplete, Box, Button, CircularProgress, Divider, FormControl, LinearProgress, Stack, TextField, ThemeProvider, ToggleButton, ToggleButtonGroup, Tooltip, useTheme } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { AppInfoPanel, PageCenter, useAppTheme, useAppThemeBuilder } from '@tui/core';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, DarkMode, Delete, WbSunny } from '@mui/icons-material';
-import { useApp } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
-import useThemeBuilder from '@cccsaurora/howler-ui/commons/components/utils/hooks/useThemeBuilder';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
 import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
-import { useSearchParams } from 'react-router-dom';
-import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
+import { useSearchParams } from 'react-router';
+import { getExampleHit } from '@cccsaurora/howler-ui/utils/exampleHit';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
 import MarkdownEditor from '../../elements/MarkdownEditor';
 import { useStartingTemplate } from './startingTemplate';
 const OverviewViewer = () => {
     const theme = useTheme();
-    const app = useApp();
-    const { lightTheme, darkTheme } = useThemeBuilder(useMyTheme());
+    const { current: currentTheme, optionsOverride, mode } = useAppTheme();
+    const themeBuilder = useAppThemeBuilder();
+    const { lightTheme, darkTheme } = useMemo(() => themeBuilder(currentTheme, optionsOverride), [themeBuilder, currentTheme, optionsOverride]);
     const { t } = useTranslation();
     const [params, setParams] = useSearchParams();
     const { getOverviews } = useContext(OverviewContext);
@@ -32,7 +29,7 @@ const OverviewViewer = () => {
     const [overviewList, setOverviewList] = useState([]);
     const [selectedOverview, setSelectedOverview] = useState(null);
     const [content, setContent] = useState('');
-    const [chosenTheme, setChosenTheme] = useState(app.theme);
+    const [chosenTheme, setChosenTheme] = useState(mode);
     const [analytics, setAnalytics] = useState([]);
     const [detections, setDetections] = useState([]);
     const [analytic, setAnalytic] = useState(params.get('analytic') ?? '');
@@ -41,19 +38,19 @@ const OverviewViewer = () => {
     const [overviewLoading, setOverviewLoading] = useState(false);
     const [exampleHit, setExampleHit] = useState(null);
     const [x, setX] = useState(0);
-    const wrapper = useRef();
+    const wrapper = useRef(null);
     const startingTemplate = useStartingTemplate();
     useEffect(() => {
         void (async () => {
             setLoading(true);
             try {
-                setOverviewList(await getOverviews(true));
+                setOverviewList((await getOverviews(true)) ?? []);
                 const analyticsResult = await dispatchApi(api.search.analytic.post({ query: 'analytic_id:*', rows: 1000 }), {
                     logError: false,
                     showError: true,
                     throwError: true
                 });
-                const _analytics = analyticsResult.items;
+                const _analytics = analyticsResult?.items ?? [];
                 if (!_analytics.some(_analytic => _analytic.name.toLowerCase() === analytic.toLowerCase())) {
                     setAnalytic('');
                 }
@@ -86,7 +83,7 @@ const OverviewViewer = () => {
                 setExampleHit(result.items[0]);
                 return;
             }
-            const _hit = hitsData.GET[Object.keys(hitsData.GET)[0]];
+            const _hit = getExampleHit();
             if (analytic) {
                 _hit.howler.analytic = analytic;
             }
@@ -102,7 +99,7 @@ const OverviewViewer = () => {
                 ((detection === 'ANY' && !_overview.detection) || _overview.detection === detection));
             if (overview) {
                 setSelectedOverview(overview);
-                setContent(overview.content);
+                setContent(overview.content ?? '');
             }
             else {
                 setSelectedOverview(null);
@@ -129,44 +126,56 @@ const OverviewViewer = () => {
         });
     }, [analytic, detection, params, setParams]);
     const onDelete = useCallback(() => {
+        const overviewId = selectedOverview?.overview_id;
+        if (!overviewId) {
+            return;
+        }
         withConfirmDeleteModal(async () => {
-            await dispatchApi(api.overview.del(selectedOverview.overview_id), {
+            await dispatchApi(api.overview.del(overviewId), {
                 logError: false,
                 showError: true,
                 throwError: true
             });
-            setOverviewList(l => l.filter(v => v.overview_id !== selectedOverview.overview_id));
+            setOverviewList(l => l.filter(v => v.overview_id !== overviewId));
             setSelectedOverview(null);
             setContent('');
             showSuccessMessage(t('route.overviews.manager.delete.success'));
         });
     }, [dispatchApi, selectedOverview?.overview_id, withConfirmDeleteModal, showSuccessMessage, t]);
     const onSave = useCallback(async () => {
-        if (analytic && detection) {
-            try {
-                setOverviewLoading(true);
-                const result = await dispatchApi(selectedOverview
-                    ? api.overview.put(selectedOverview.overview_id, content)
-                    : api.overview.post({
-                        analytic,
-                        detection: detection !== 'ANY' ? detection : null,
-                        content
-                    }), {
-                    logError: false,
-                    showError: true,
-                    throwError: true
-                });
-                setSelectedOverview(result);
-                const newList = [result, ...overviewList];
-                setOverviewList(newList.filter((v1, i) => newList.findIndex(v2 => v1.overview_id === v2.overview_id) === i));
-            }
-            finally {
-                setOverviewLoading(false);
+        if (!analytic || !detection) {
+            return;
+        }
+        const selectedOverviewId = selectedOverview?.overview_id;
+        if (selectedOverview && !selectedOverviewId) {
+            return;
+        }
+        try {
+            setOverviewLoading(true);
+            const result = await dispatchApi(selectedOverviewId
+                ? api.overview.put(selectedOverviewId, content)
+                : api.overview.post({
+                    analytic,
+                    detection: detection !== 'ANY' ? detection : undefined,
+                    content
+                }), {
+                logError: false,
+                showError: true,
+                throwError: true
+            });
+            if (!result) {
+                return;
             }
+            setSelectedOverview(result);
+            const newList = [result, ...overviewList];
+            setOverviewList(newList.filter((v1, i) => newList.findIndex(v2 => v1.overview_id === v2.overview_id) === i));
+        }
+        finally {
+            setOverviewLoading(false);
         }
     }, [analytic, detection, dispatchApi, selectedOverview, content, overviewList]);
     const onMouseMove = useCallback((event) => {
-        const wrapperRect = wrapper.current?.getBoundingClientRect();
+        const wrapperRect = wrapper.current.getBoundingClientRect();
         const offset = event.clientX - (wrapperRect.left + wrapperRect.width / 2);
         setX(offset);
     }, []);
@@ -181,7 +190,7 @@ const OverviewViewer = () => {
     const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
     const noChange = useMemo(() => selectedOverview?.content === content, [content, selectedOverview?.content]);
     const activeTheme = chosenTheme === 'light' ? lightTheme : darkTheme;
-    return (_jsxs(PageCenter, { maxWidth: "100%", width: "100%", textAlign: "left", height: "100%", children: [_jsx(LinearProgress, { sx: { mb: 1, opacity: +loading } }), _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), height: "100%", children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(FormControl, { sx: { maxWidth: { sm: '300px', lg: '450px' }, width: '100%' }, children: _jsx(Autocomplete, { id: "analytic", options: analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())), getOptionLabel: option => option.name, value: analytics.find(a => a.name === analytic) || null, onChange: (_event, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.overviews.analytic'), size: "small" })) }) }), _jsx(FormControl, { sx: { minWidth: { sm: '200px' } }, disabled: !analytic, children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: detection ?? '', onChange: (_event, newValue) => setDetection(newValue), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.overviews.detection'), size: "small" })) }) }), selectedOverview && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || noChange, startIcon: overviewLoading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Check, {}), onClick: onSave, children: t(!analyticOrDetectionMissing && !noChange ? 'button.save' : 'button.saved') }), _jsx("div", { style: { flex: 1 } }), _jsxs(ToggleButtonGroup, { exclusive: true, value: chosenTheme, onChange: (_event, value) => setChosenTheme(value), sx: { maxHeight: '40px' }, children: [_jsx(Tooltip, { title: t('route.overviews.theme.light'), children: _jsx(ToggleButton, { value: "light", children: _jsx(WbSunny, {}) }) }), _jsx(Tooltip, { title: t('route.overviews.theme.dark'), children: _jsx(ToggleButton, { value: "dark", children: _jsx(DarkMode, {}) }) })] })] }), analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.overviews.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsxs(Stack, { ref: wrapper, direction: "row", spacing: 1, height: "100%", onKeyDown: e => {
+    return (_jsxs(PageCenter, { maxWidth: "100%", width: "100%", textAlign: "left", height: "100%", children: [_jsx(LinearProgress, { sx: { mb: 1, opacity: +loading } }), _jsxs(Stack, { direction: "column", spacing: 2, divider: _jsx(Divider, { orientation: "horizontal", flexItem: true }), height: "100%", children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(FormControl, { sx: { maxWidth: { sm: '300px', lg: '450px' }, width: '100%' }, children: _jsx(Autocomplete, { id: "analytic", options: analytics.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())), getOptionLabel: option => option.name, value: analytics.find(a => a.name === analytic) || null, onChange: (_event, newValue) => setAnalytic(newValue ? newValue.name : ''), renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.overviews.analytic'), size: "small" })) }) }), _jsx(FormControl, { sx: { minWidth: { sm: '200px' } }, disabled: !analytic, children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: detection ?? '', onChange: (_event, newValue) => setDetection(newValue ?? 'ANY'), renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.overviews.detection'), size: "small" })) }) }), selectedOverview && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || noChange, startIcon: overviewLoading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Check, {}), onClick: onSave, children: t(!analyticOrDetectionMissing && !noChange ? 'button.save' : 'button.saved') }), _jsx("div", { style: { flex: 1 } }), _jsxs(ToggleButtonGroup, { exclusive: true, value: chosenTheme, onChange: (_event, value) => setChosenTheme(value ?? chosenTheme), sx: { maxHeight: '40px' }, children: [_jsx(Tooltip, { title: t('route.overviews.theme.light'), children: _jsx(ToggleButton, { value: "light", children: _jsx(WbSunny, {}) }) }), _jsx(Tooltip, { title: t('route.overviews.theme.dark'), children: _jsx(ToggleButton, { value: "dark", children: _jsx(DarkMode, {}) }) })] })] }), analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.overviews.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsxs(Stack, { ref: wrapper, direction: "row", spacing: 1, height: "100%", onKeyDown: e => {
                             if (e.ctrlKey && e.key === 's') {
                                 if (!noChange) {
                                     void onSave();

package/components/routes/overviews/Overviews.d.ts

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

package/components/routes/overviews/Overviews.js

@@ -3,7 +3,7 @@ import { Article } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
-import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
+import SearchResponseProvider, { createSearchResponseContext, useSearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
@@ -12,9 +12,10 @@ import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/us
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import OverviewCard from './OverviewCard';
+const SearchResponseContext = createSearchResponseContext();
 const OverviewsBase = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
@@ -28,7 +29,7 @@ const OverviewsBase = () => {
     const [hasError, setHasError] = useState(false);
     const [loading, setLoading] = useState(false);
     const { analytics } = useContext(AnalyticContext);
-    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
+    const { response, request, remove, getSearchRequestData } = useSearchResponseContext(SearchResponseContext);
     const onSearch = useCallback(async () => {
         try {
             setLoading(true);
@@ -66,7 +67,7 @@ const OverviewsBase = () => {
                 item,
                 selected: false,
                 cursor: false,
-                disabled: item.detection &&
+                disabled: !!item.detection &&
                     !analytics
                         .find(v => v.name === item.analytic)
                         ?.detections?.map((s) => s.toLowerCase())
@@ -102,7 +103,7 @@ const OverviewsBase = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        if (response?.total <= offset) {
+        if ((response?.total ?? 0) <= offset) {
             setOffset(0);
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
@@ -118,6 +119,6 @@ const OverviewsBase = () => {
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.overviews.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, !!item.disabled, classRenderer()), response: response, onSelect: (item) => navigate(`/overviews/view?analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`), onCreate: () => navigate('/overviews/view'), createPrompt: "route.overviews.create", searchPrompt: "route.overviews.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
 };
 const Overviews = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "overview_id", children: _jsx(OverviewsBase, {}) }) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { context: SearchResponseContext, idField: "overview_id", children: _jsx(OverviewsBase, {}) }) }));
 };
 export default Overviews;

package/components/routes/overviews/markdownExtendedTokenProvider.test.js

@@ -1,4 +1,5 @@
 /// <reference types="vitest" />
+// @ts-nocheck
 import { describe, expect, it } from 'vitest';
 import { conf, language } from './markdownExtendedTokenProvider';
 describe('markdownExtendedTokenProvider', () => {

package/components/routes/overviews/startingTemplate.js

@@ -14,7 +14,7 @@ export const useStartingTemplate = () => {
         .map(helper => `
 ### \`${helper.keyword}\`
 
-${helper.documentation[i18n.language]}
+${helper.documentation?.[i18n.language] ?? ''}
 
 ---
 `.trim())

package/components/routes/settings/ProfileSection.d.ts

@@ -5,6 +5,6 @@ declare const ProfileSection: FC<{
     editName?: (value: string) => Promise<void>;
     addRole?: (role: string) => Promise<void>;
     removeRole?: (role: string) => Promise<void>;
-    viewGroups: () => Promise<void>;
+    viewGroups?: () => Promise<void>;
 }>;
 export default ProfileSection;

package/components/routes/settings/ProfileSection.js

@@ -43,11 +43,11 @@ const ProfileSection = ({ user, editName, addRole, removeRole, viewGroups }) =>
             setLoadingGroups(false);
         }
     }, [viewGroups]);
-    return (_jsxs(SettingsSection, { title: t('page.settings.profile.title'), colSpan: 3, children: [_jsxs(TableRow, { children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.username') }), _jsx(TableCell, { width: "100%", colSpan: 2, children: user?.username })] }), _jsx(EditRow, { titleKey: "page.settings.profile.table.name", value: user?.name, onEdit: editName }), _jsxs(TableRow, { children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.email') }), _jsx(TableCell, { width: "100%", colSpan: 2, children: user?.email })] }), viewGroups && (_jsxs(_Fragment, { children: [_jsxs(TableRow, { onClick: onViewGroups, sx: theme => ({
+    return (_jsxs(SettingsSection, { title: t('page.settings.profile.title'), colSpan: 3, children: [_jsxs(TableRow, { children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.username') }), _jsx(TableCell, { width: "100%", colSpan: 2, children: user?.username })] }), _jsx(EditRow, { titleKey: "page.settings.profile.table.name", value: user?.name ?? '', onEdit: editName }), _jsxs(TableRow, { children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.email') }), _jsx(TableCell, { width: "100%", colSpan: 2, children: user?.email })] }), viewGroups && (_jsxs(_Fragment, { children: [_jsxs(TableRow, { onClick: onViewGroups, sx: theme => ({
                             cursor: 'pointer',
                             transitionProperty: 'background-color',
                             transitionDuration: theme.transitions.duration.shortest + 'ms',
                             '&:hover': { backgroundColor: 'rgba(128, 128, 128, 0.25)' }
-                        }), children: [_jsx(TableCell, { sx: { borderBottom: 0 }, style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.groups') }), _jsx(TableCell, { sx: { borderBottom: 0 }, align: "right", width: "100%", colSpan: 2, children: loadingGroups ? _jsx(CircularProgress, { size: 20 }) : _jsx(ChevronRight, { fontSize: "small" }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.profile.table.groups.description') }) }) })] })), _jsxs(TableRow, { children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.roles') }), _jsx(TableCell, { width: "100%", colSpan: 2, children: _jsx(Grid, { container: true, direction: "row", spacing: 1, children: config?.lookups?.roles?.map((r) => (_jsx(Grid, { item: true, children: _jsx(Chip, { label: r.toLocaleLowerCase(), color: user?.roles?.includes(r) ? 'primary' : 'default', icon: loading[r] ? (_jsx(CircularProgress, { size: 24 })) : addRole && !user?.roles?.includes(r) ? (_jsx(Add, {})) : user?.roles?.includes(r) ? (removeRole ? null : (_jsx(Check, {}))) : (_jsx(Clear, {})), onClick: addRole && !user?.roles?.includes(r) ? () => wrapChange(r, addRole) : null, onDelete: removeRole && user?.roles?.includes(r) ? () => wrapChange(r, removeRole) : null }) }, r))) }) })] }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'profile'))] }));
+                        }), children: [_jsx(TableCell, { sx: { borderBottom: 0 }, style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.groups') }), _jsx(TableCell, { sx: { borderBottom: 0 }, align: "right", width: "100%", colSpan: 2, children: loadingGroups ? _jsx(CircularProgress, { size: 20 }) : _jsx(ChevronRight, { fontSize: "small" }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.profile.table.groups.description') }) }) })] })), _jsxs(TableRow, { children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.profile.table.roles') }), _jsx(TableCell, { width: "100%", colSpan: 2, children: _jsx(Grid, { container: true, direction: "row", spacing: 1, children: config?.lookups?.roles?.map((r) => (_jsx(Grid, { children: _jsx(Chip, { label: r.toLocaleLowerCase(), color: user?.roles?.includes(r) ? 'primary' : 'default', icon: loading[r] ? (_jsx(CircularProgress, { size: 24 })) : addRole && !user?.roles?.includes(r) ? (_jsx(Add, {})) : user?.roles?.includes(r) ? (removeRole ? undefined : (_jsx(Check, {}))) : (_jsx(Clear, {})), onClick: addRole && !user?.roles?.includes(r) ? () => wrapChange(r, addRole) : undefined, onDelete: removeRole && user?.roles?.includes(r) ? () => wrapChange(r, removeRole) : undefined }) }, r))) }) })] }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'profile'))] }));
 };
 export default ProfileSection;

package/components/routes/settings/SecuritySection.d.ts

@@ -5,6 +5,6 @@ declare const SecuritySection: FC<{
     editPassword?: (password: string) => Promise<void>;
     addApiKey?: () => void;
     removeApiKey?: (apiKey: [string, string[], string]) => Promise<void>;
-    editQuota?: (quote?: string) => Promise<void>;
+    editQuota?: (quota?: string) => Promise<void>;
 }>;
 export default SecuritySection;

package/components/routes/settings/SecuritySection.js

@@ -23,9 +23,9 @@ const SecuritySection = ({ user, editPassword, addApiKey, removeApiKey, editQuot
     const { config } = useContext(ApiConfigContext);
     const pluginStore = usePluginStore();
     const isOAuth = useMemo(() => get(StorageKey.APP_TOKEN)?.includes('.'), [get]);
-    return (_jsxs(SettingsSection, { title: t('page.settings.security.title'), colSpan: 3, children: [!isOAuth && editPassword && (_jsx(EditRow, { titleKey: "page.settings.security.table.password", value: "\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF", onEdit: editPassword, type: "password" })), config?.configuration.auth.allow_apikeys && (_jsxs(TableRow, { sx: { cursor: 'pointer' }, children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.security.table.apikeys') }), _jsx(TableCell, { width: "100%", children: _jsxs(Grid, { container: true, spacing: 1, children: [user?.apikeys?.map(apiKey => (_jsx(Grid, { item: true, children: _jsx(Chip, { label: apiKey[0].toLocaleLowerCase() +
+    return (_jsxs(SettingsSection, { title: t('page.settings.security.title'), colSpan: 3, children: [!isOAuth && editPassword && (_jsx(EditRow, { titleKey: "page.settings.security.table.password", value: "\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF", onEdit: value => editPassword(value), type: "password" })), config.configuration?.auth.allow_apikeys && (_jsxs(TableRow, { sx: { cursor: 'pointer' }, children: [_jsx(TableCell, { style: { whiteSpace: 'nowrap' }, children: t('page.settings.security.table.apikeys') }), _jsx(TableCell, { width: "100%", children: _jsxs(Grid, { container: true, spacing: 1, children: [user?.apikeys?.map(apiKey => (_jsx(Grid, { children: _jsx(Chip, { label: apiKey[0].toLocaleLowerCase() +
                                             (apiKey[1].length > 0
                                                 ? ` (${apiKey[1].map(permission => t(APIKEY_LABELS[permission])).join(', ')})`
-                                                : ''), style: { backgroundColor: dayjs.utc(apiKey[2]).isBefore(dayjs().utc()) ? 'orange' : 'default' }, onDelete: removeApiKey ? () => removeApiKey(apiKey) : null }) }, apiKey[0]))), user?.apikeys?.length < 1 && (_jsx(Grid, { item: true, children: _jsx(Trans, { i18nKey: "none" }) }))] }) }), _jsx(TableCell, { align: "right", children: addApiKey && (_jsx(IconButton, { onClick: addApiKey, children: _jsx(Add, { fontSize: "small" }) })) })] })), _jsx(EditRow, { titleKey: "page.settings.security.table.apiquota", descriptionKey: "page.settings.security.table.apiquota.description", value: user?.api_quota, validate: value => value && /^[0-9]*$/m.test(value.toString()), type: "number", onEdit: editQuota }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'security'))] }));
+                                                : ''), style: { backgroundColor: dayjs.utc(apiKey[2]).isBefore(dayjs().utc()) ? 'orange' : 'default' }, onDelete: removeApiKey ? () => removeApiKey(apiKey) : undefined }) }, apiKey[0]))), (user?.apikeys?.length ?? 0) < 1 && (_jsx(Grid, { children: _jsx(Trans, { i18nKey: "none" }) }))] }) }), _jsx(TableCell, { align: "right", children: addApiKey && (_jsx(IconButton, { onClick: addApiKey, children: _jsx(Add, { fontSize: "small" }) })) })] })), _jsx(EditRow, { titleKey: "page.settings.security.table.apiquota", descriptionKey: "page.settings.security.table.apiquota.description", value: user?.api_quota ?? '', validate: value => !!value && /^[0-9]*$/m.test(value.toString()), type: "number", onEdit: editQuota ? value => editQuota(value ?? undefined) : undefined }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'security'))] }));
 };
 export default SecuritySection;

package/components/routes/settings/Settings.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { useAppUser } from '@tui/core';
 import UserPageWrapper from '@cccsaurora/howler-ui/components/elements/display/UserPageWrapper';
 import useMyLocalStorage from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyUserFunctions from '@cccsaurora/howler-ui/components/hooks/useMyUserFunctions';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import AdminSection from './AdminSection';
 import LocalSection from './LocalSection';
@@ -14,9 +14,9 @@ const Settings = () => {
     const { editName, editPassword, editQuota, addApiKey, removeApiKey, addRole, removeRole, viewGroups } = useMyUserFunctions();
     const { get } = useMyLocalStorage();
     const isOAuth = useMemo(() => get(StorageKey.APP_TOKEN)?.includes('.'), [get]);
-    const currentUserWrapper = useCallback((fn) => {
-        return async (value) => setUser(await fn(currentUser, value));
-    }, [currentUser, setUser]);
-    return (_jsxs(UserPageWrapper, { user: currentUser, children: [_jsx(ProfileSection, { user: currentUser, editName: !isOAuth && currentUserWrapper(editName), addRole: currentUser.is_admin && !isOAuth && currentUserWrapper(addRole), removeRole: currentUser.is_admin && !isOAuth && currentUserWrapper(removeRole), viewGroups: viewGroups }), _jsx(SecuritySection, { user: currentUser, editPassword: editPassword, addApiKey: addApiKey, removeApiKey: currentUserWrapper(removeApiKey), editQuota: currentUser.is_admin && currentUserWrapper(editQuota) }), _jsx(LocalSection, {}), currentUser.roles.includes('admin') && _jsx(AdminSection, {})] }));
+    const currentUserWrapper = (fn) => async (value) => {
+        setUser(await fn(currentUser, value));
+    };
+    return (_jsxs(UserPageWrapper, { user: currentUser, children: [_jsx(ProfileSection, { user: currentUser, editName: !isOAuth ? currentUserWrapper(editName) : undefined, addRole: currentUser.is_admin && !isOAuth ? currentUserWrapper(addRole) : undefined, removeRole: currentUser.is_admin && !isOAuth ? currentUserWrapper(removeRole) : undefined, viewGroups: viewGroups }), _jsx(SecuritySection, { user: currentUser, editPassword: editPassword, addApiKey: addApiKey, removeApiKey: currentUserWrapper(removeApiKey), editQuota: currentUser.is_admin ? currentUserWrapper(editQuota) : undefined }), _jsx(LocalSection, {}), currentUser.roles.includes('admin') && _jsx(AdminSection, {})] }));
 };
 export default Settings;

package/components/routes/templates/TemplateCard.js

@@ -12,6 +12,6 @@ const TemplateCard = ({ template, onRemove, error, className }) => {
                         readonly: _jsx(Lock, {}),
                         global: _jsx(Language, {}),
                         personal: _jsx(Person, {})
-                    }[template.type] }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(template.analytic), " - ", t(template.detection ?? 'all')] }), template.keys.map(key => (_jsx(Typography, { variant: "caption", sx: { ml: 1 }, children: _jsx("code", { children: key }) }, template.template_id + key)))] }), error && (_jsx(Stack, { direction: "row", justifyContent: "end", width: "100%", children: _jsx(Stack, { children: _jsx(Tooltip, { title: t('error.invalid_detection.action'), children: _jsx(Button, { startIcon: _jsx(ReportProblem, {}), color: "warning", onClick: () => showModal(_jsx(ConfirmDeleteModal, { onConfirm: () => onRemove?.(template.template_id), title: t('route.templates.manager.error.modal.title'), description: t('route.templates.manager.error.modal.description'), preferDelete: true })), children: t('error.invalid_detection.message') }) }) }) }))] }) }, template.template_id));
+                    }[template.type] ?? _jsx(Lock, {}) }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(template.analytic), " - ", t(template.detection ?? 'all')] }), (template.keys ?? []).map(key => (_jsx(Typography, { variant: "caption", sx: { ml: 1 }, children: _jsx("code", { children: key }) }, template.template_id + key)))] }), error && (_jsx(Stack, { direction: "row", justifyContent: "end", width: "100%", children: _jsx(Stack, { children: _jsx(Tooltip, { title: t('error.invalid_detection.action'), children: _jsx(Button, { startIcon: _jsx(ReportProblem, {}), color: "warning", onClick: () => showModal(_jsx(ConfirmDeleteModal, { onConfirm: () => onRemove?.(template.template_id), title: t('route.templates.manager.error.modal.title'), description: t('route.templates.manager.error.modal.description'), preferDelete: true })), children: t('error.invalid_detection.message') }) }) }) }))] }) }, template.template_id));
 };
 export default TemplateCard;

package/components/routes/templates/TemplateEditor.d.ts

@@ -5,6 +5,6 @@ declare const TemplateEditor: ({ hit, fields, setFields, onRemove, onAdd }: {
     setFields: (displayFields: string[]) => void;
     onRemove: (field: string) => void;
     onAdd: (field: string) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TemplateEditor>;
 export default _default;

package/components/routes/templates/TemplateEditor.js

@@ -34,10 +34,10 @@ const TemplateEditor = ({ hit, fields, setFields, onRemove, onAdd }) => {
     }, [getHitFields]);
     const handleDragEnd = useCallback((event) => {
         const { active, over } = event;
-        if (active.id !== over.id) {
+        if (over && active.id !== over.id) {
             const oldIndex = (fields ?? []).findIndex(entry => entry === active.id);
             const newIndex = (fields ?? []).findIndex(entry => entry === over.id);
-            setFields(arrayMove(fields, oldIndex, newIndex));
+            setFields(arrayMove(fields ?? [], oldIndex, newIndex));
         }
     }, [fields, setFields]);
     return (_jsxs(Stack, { spacing: 1, width: "100%", alignItems: "stretch", children: [_jsx(DndContext, { collisionDetection: closestCorners, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: (fields ?? []).map(entry => entry), children: fields.map(field => {
@@ -48,7 +48,7 @@ const TemplateEditor = ({ hit, fields, setFields, onRemove, onAdd }) => {
                         else if (isObject(data)) {
                             data = JSON.stringify(data);
                         }
-                        return (_jsx(TemplateDnD, { field: field, data: data, onRemove: onRemove, tooltipTitle: (config.indexes.hit[field].description ?? t('none')).split('\n')[0] }, field));
+                        return (_jsx(TemplateDnD, { field: field, data: data, onRemove: onRemove, tooltipTitle: (config.indexes?.hit[field].description ?? t('none')).split('\n')[0] }, field));
                     }) }) }), _jsxs(Stack, { direction: "row", sx: { '& > div': { flex: 1 } }, spacing: 1, children: [_jsx(Phrase, { suggestions: suggestions, value: phrase, onChange: setPhrase, onKeyDown: checkForActions, size: "small" }), _jsx(Button, { variant: "outlined", size: "small", sx: { marginLeft: 'auto' }, startIcon: _jsx(Add, { fontSize: "small" }), disabled: !suggestions.includes(phrase) || fields.includes(phrase), onClick: tryAddField, children: t('button.add') })] }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.templates.prompt') })] }));
 };
 export default memo(TemplateEditor);

package/components/routes/templates/TemplateViewer.d.ts

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

package/components/routes/templates/TemplateViewer.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Autocomplete, Button, CircularProgress, Divider, FormControl, LinearProgress, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import { AppInfoPanel, PageCenter } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import TemplateEditor from '@cccsaurora/howler-ui/components/routes/templates/TemplateEditor';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Delete, SsidChart } from '@mui/icons-material';
-import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { DEFAULT_FIELDS } from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import isEqual from 'lodash-es/isEqual';
-import { useSearchParams } from 'react-router-dom';
-import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
+import { useSearchParams } from 'react-router';
+import { getExampleHit } from '@cccsaurora/howler-ui/utils/exampleHit';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
 const TemplateViewer = () => {
     const { t } = useTranslation();
@@ -40,14 +39,14 @@ const TemplateViewer = () => {
             throwError: true
         })
             .finally(() => setLoading(false))
-            .then(result => result.items)
+            .then(result => result?.items ?? [])
             .then(_analytics => {
             if (!_analytics.some(_analytic => _analytic.name.toLowerCase() === analytic.toLowerCase())) {
                 setAnalytic('');
             }
             setAnalytics(_analytics);
         });
-        void dispatchApi(api.template.get()).then(setTemplateList);
+        void dispatchApi(api.template.get()).then(result => setTemplateList(result ?? []));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [analytic, dispatchApi]);
     useEffect(() => {
@@ -64,7 +63,7 @@ const TemplateViewer = () => {
             throwError: true
         })
             .finally(() => setLoading(false))
-            .then(result => result.items.map(i => i.value))
+            .then(result => result?.items.map(i => i.value) ?? [])
             .then(_detections => {
             if (_detections.length < 1) {
                 setDetection('ANY');
@@ -85,11 +84,11 @@ const TemplateViewer = () => {
             const sessionTemplate = findTemplate(sessionTemplateList);
             if (template) {
                 setSelectedTemplate(template);
-                setDisplayFields(sessionTemplate ? sessionTemplate.keys : template.keys);
+                setDisplayFields((sessionTemplate ? sessionTemplate.keys : template.keys) ?? DEFAULT_FIELDS);
             }
             else {
                 setSelectedTemplate(null);
-                setDisplayFields(sessionTemplate ? sessionTemplate.keys : DEFAULT_FIELDS);
+                setDisplayFields(sessionTemplate ? (sessionTemplate.keys ?? DEFAULT_FIELDS) : DEFAULT_FIELDS);
             }
         }
     }, [analytic, detection, sessionTemplateList, templateList, type]);
@@ -113,62 +112,65 @@ const TemplateViewer = () => {
         });
     }, [analytic, detection, params, setParams, type]);
     const exampleHit = useMemo(() => {
-        const _hit = hitsData.GET[Object.keys(hitsData.GET)[0]];
+        const _hit = getExampleHit();
         if (analytic) {
             _hit.howler.analytic = analytic;
         }
         return { ..._hit };
     }, [analytic]);
     const onDelete = useCallback(() => {
+        const template = selectedTemplate;
+        if (!template?.template_id) {
+            return;
+        }
+        const templateId = template.template_id;
+        const templateAnalytic = template.analytic;
+        const templateDetection = template.detection;
+        const templateType = template.type;
         withConfirmDeleteModal(async () => {
-            await dispatchApi(api.template.del(selectedTemplate.template_id), {
+            await dispatchApi(api.template.del(templateId), {
                 logError: false,
                 showError: true,
                 throwError: true
             });
-            setSessionTemplateList(l => l.filter(v => v.analytic != selectedTemplate.analytic ||
-                v.detection != selectedTemplate.detection ||
-                v.type != selectedTemplate.type));
-            setTemplateList(l => l.filter(v => v.analytic != selectedTemplate.analytic ||
-                v.detection != selectedTemplate.detection ||
-                v.type != selectedTemplate.type));
+            setSessionTemplateList(l => l.filter(v => v.analytic !== templateAnalytic || v.detection !== templateDetection || v.type !== templateType));
+            setTemplateList(l => l.filter(v => v.analytic !== templateAnalytic || v.detection !== templateDetection || v.type !== templateType));
             showSuccessMessage(t('route.templates.manager.delete.success'));
         });
-    }, [
-        dispatchApi,
-        selectedTemplate?.analytic,
-        selectedTemplate?.detection,
-        selectedTemplate?.template_id,
-        selectedTemplate?.type,
-        withConfirmDeleteModal,
-        showSuccessMessage,
-        t
-    ]);
+    }, [dispatchApi, selectedTemplate, withConfirmDeleteModal, showSuccessMessage, t]);
     const onSave = useCallback(async () => {
-        if (analytic && detection) {
-            try {
-                setTemplateLoading(true);
-                const result = await dispatchApi(selectedTemplate
-                    ? api.template.put(selectedTemplate.template_id, displayFields)
-                    : api.template.post({
-                        analytic,
-                        detection: detection !== 'ANY' ? detection : null,
-                        type,
-                        keys: displayFields
-                    }), {
-                    logError: false,
-                    showError: true,
-                    throwError: true
-                });
-                setSelectedTemplate(result);
-                const newList = [result, ...templateList];
-                setTemplateList(newList.filter((v1, i) => newList.findIndex(v2 => v1.template_id === v2.template_id) === i));
-                const updatedSessionList = sessionTemplateList.filter(v => v.analytic !== result.analytic || v.detection !== result.detection || v.type !== result.type);
-                setSessionTemplateList(updatedSessionList);
-            }
-            finally {
-                setTemplateLoading(false);
+        if (!analytic || !detection) {
+            return;
+        }
+        const selectedTemplateId = selectedTemplate?.template_id;
+        if (selectedTemplate && !selectedTemplateId) {
+            return;
+        }
+        try {
+            setTemplateLoading(true);
+            const result = await dispatchApi(selectedTemplateId
+                ? api.template.put(selectedTemplateId, displayFields)
+                : api.template.post({
+                    analytic,
+                    detection: detection !== 'ANY' ? detection : undefined,
+                    type,
+                    keys: displayFields
+                }), {
+                logError: false,
+                showError: true,
+                throwError: true
+            });
+            if (!result) {
+                return;
             }
+            setSelectedTemplate(result);
+            const newList = [result, ...templateList];
+            setTemplateList(newList.filter((v1, i) => newList.findIndex(v2 => v1.template_id === v2.template_id) === i));
+            const updatedSessionList = sessionTemplateList.filter(v => v.analytic !== result.analytic || v.detection !== result.detection || v.type !== result.type);
+            setSessionTemplateList(updatedSessionList);
+        }
+        finally {
+            setTemplateLoading(false);
         }
     }, [analytic, detection, dispatchApi, displayFields, selectedTemplate, sessionTemplateList, templateList, type]);
     const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
@@ -180,7 +182,7 @@ const TemplateViewer = () => {
         }
         const sessionTemplate = {
             analytic: analytic,
-            detection: detection !== 'ANY' ? detection : null,
+            detection: detection !== 'ANY' ? detection : undefined,
             type: type,
             keys: displayFields
         };
@@ -191,7 +193,7 @@ const TemplateViewer = () => {
                                         setAnalytic(newValue ? newValue.name : '');
                                         setSessionTemplateList([]); // do not keep session memory if analytic or detection is changed
                                     }, renderInput: autocompleteAnalyticParams => (_jsx(TextField, { ...autocompleteAnalyticParams, label: t('route.templates.analytic'), size: "small" })) }) }), !(detections?.length < 2 && detections[0]?.toLowerCase() === 'rule') ? (_jsx(FormControl, { sx: { flex: 1, maxWidth: '300px' }, disabled: !analytic, children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: detection ?? '', onChange: (__, newValue) => {
-                                        setDetection(newValue);
+                                        setDetection(newValue ?? 'ANY');
                                         setSessionTemplateList([]); // do not keep session memory if analytic or detection is changed
                                     }, renderInput: autocompleteDetectionParams => (_jsx(TextField, { ...autocompleteDetectionParams, label: t('route.templates.detection'), size: "small" })) }) })) : (_jsx(Tooltip, { title: t('route.templates.rule.explanation'), children: _jsx(SsidChart, { color: "info", sx: { alignSelf: 'center' } }) })), _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", exclusive: true, value: type, disabled: analyticOrDetectionMissing, onChange: (__, _type) => {
                                     if (_type) {

package/components/routes/templates/Templates.d.ts

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