@cccsaurora/howler-ui 2.19.0-dev.920 → 2.19.0-dev.922

package/components/elements/addons/lists/TuiListBase.js

@@ -30,6 +30,10 @@ const TuiListBaseRoot = styled('div')(({ theme }) => ({
             display: 'flex',
             backgroundColor: emphasize(theme.palette.background.default, 0.04)
         }
+    },
+    '.elementDisabled': {
+        color: theme.palette.text.disabled,
+        cursor: 'default'
     }
 }));
 const TuiListBase = ({ keyboard = false, onSelect, children }) => {

package/components/elements/addons/lists/TuiListElement.js

@@ -5,11 +5,14 @@ import VSBoxElement from '../layout/vsbox/VSBoxElement';
 const TuiListElement = ({ position, item, onSelect: onClick, children }) => {
     const elementEl = useRef();
     const onItemClick = useCallback(_event => {
-        if (onClick) {
+        if (onClick && !item.disabled) {
             onClick(item, position);
         }
     }, [onClick, item, position]);
     const classRenderer = useCallback(() => {
+        if (item.disabled) {
+            return 'elementDisabled';
+        }
         const _classes = ['elementHover'];
         if (item.cursor) {
             _classes.push('elementFocus');
@@ -18,7 +21,7 @@ const TuiListElement = ({ position, item, onSelect: onClick, children }) => {
             _classes.push('elementSelected');
         }
         return _classes.join(' ');
-    }, [item.cursor, item.selected]);
-    return (_jsx(VSBoxElement, { focus: !!item.cursor, children: _jsx("div", { ref: elementEl, "data-tuilist-index": position, "data-tuilist-id": item.id, "data-tuilist-focus": !!item.cursor, "data-tuilist-selected": !!item.selected, onClick: onItemClick, children: children({ item, position }, classRenderer) }) }));
+    }, [item.cursor, item.selected, item.disabled]);
+    return (_jsx(VSBoxElement, { focus: !!item.cursor, children: _jsx("div", { ref: elementEl, "data-tuilist-index": position, "data-tuilist-id": item.id, "data-tuilist-focus": !!item.cursor, "data-tuilist-selected": !!item.selected, "aria-disabled": item.disabled, onClick: onItemClick, children: children({ item, position }, classRenderer) }) }));
 };
 export default memo(TuiListElement);

package/components/elements/addons/lists/index.d.ts

@@ -8,6 +8,7 @@ export type TuiListItem<T> = {
     details?: boolean;
     cursor?: boolean;
     selected?: boolean;
+    disabled?: boolean;
     item: T;
 };
 export type TuiListItemProps<T> = {

package/components/elements/display/modals/ConfirmDeleteModal.d.ts

@@ -1,5 +1,9 @@
 import type { FC } from 'react';
 declare const ConfirmDeleteModal: FC<{
     onConfirm: () => void;
+    title?: string;
+    description?: string;
+    preferDelete?: boolean;
+    preferCancel?: boolean;
 }>;
 export default ConfirmDeleteModal;

package/components/elements/display/modals/ConfirmDeleteModal.js

@@ -3,13 +3,15 @@ import { Button, Stack, Typography } from '@mui/material';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-const ConfirmDeleteModal = ({ onConfirm }) => {
+const ConfirmDeleteModal = ({ onConfirm, title, description, preferDelete, preferCancel }) => {
     const { t } = useTranslation();
     const { close } = useContext(ModalContext);
     const handleConfirm = useCallback(() => {
         onConfirm();
         close();
     }, [close, onConfirm]);
-    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.confirm.delete.title') }), _jsx(Typography, { children: t('modal.confirm.delete.description') }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", onClick: handleConfirm, children: t('confirm') })] })] }));
+    const modalTitle = title ?? t('modal.confirm.delete.title');
+    const modalDesc = description ?? t('modal.confirm.delete.description');
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: '500px' }, children: [_jsx(Typography, { variant: "h4", children: modalTitle }), _jsx(Typography, { children: modalDesc }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: preferCancel ? 'contained' : 'outlined', onClick: close, children: t('button.cancel') }), _jsx(Button, { variant: preferDelete ? 'contained' : 'outlined', onClick: handleConfirm, children: t('button.delete') })] })] }));
 };
 export default ConfirmDeleteModal;

package/components/elements/hit/HitSummary.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Analytics, InfoOutlined } from '@mui/icons-material';
 import { Alert, AlertTitle, Autocomplete, Box, Button, Chip, CircularProgress, Divider, Fade, Grid, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
@@ -23,6 +23,7 @@ const HitSummary = ({ response, onStart, onComplete }) => {
     const { hitFields } = useContext(FieldContext);
     const { showErrorMessage } = useMySnackbar();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [showHitSummaryGraph] = useMyLocalStorageItem(StorageKey.SHOW_HIT_SUMMARY_GRAPH, true);
     const { getMatchingTemplate } = useMatchers();
     const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
     const error = useContextSelector(HitSearchContext, ctx => ctx.error);
@@ -130,7 +131,7 @@ const HitSummary = ({ response, onStart, onComplete }) => {
         performAggregation();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [query, views, searching, error]);
-    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), _jsx(HitGraph, {}), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
+    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), showHitSummaryGraph && (_jsxs(_Fragment, { children: [_jsx(HitGraph, {}), _jsx(Divider, { flexItem: true })] })), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
                         .filter(key => !isEmpty(aggregateResults[key]))
                         .flatMap(key => [
                         _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count ?? '?', " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key]?.sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source))) ?? '?'] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),

package/components/routes/settings/LocalSection.js

@@ -17,11 +17,12 @@ const LocalSection = () => {
     const [compactJson, setCompactJson] = useMyLocalStorageItem(StorageKey.COMPACT_JSON, true);
     const [flattenJson, setFlattenJson] = useMyLocalStorageItem(StorageKey.FLATTEN_JSON, false);
     const [forceDrawer, setForceDrawer] = useMyLocalStorageItem(StorageKey.FORCE_DRAWER, false);
+    const [showHitSummaryGraph, setShowHitSummaryGraph] = useMyLocalStorageItem(StorageKey.SHOW_HIT_SUMMARY_GRAPH, true);
     const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
     const [displayType, setDisplayType] = useMyLocalStorageItem(StorageKey.DISPLAY_TYPE, 'list');
     const [pageCount, setPageCount] = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25);
     const [searchWidth, setSearchWidth] = useMyLocalStorageItem(StorageKey.SEARCH_PANE_WIDTH, null);
     const [templateFieldCount, setTemplateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
-    return (_jsxs(SettingsSection, { title: t('page.settings.local.title'), colSpan: 3, children: [_jsx(EditRow, { titleKey: "page.settings.local.compact.json", descriptionKey: "page.settings.local.compact.json.description", value: compactJson, type: "checkbox", onEdit: async (value) => setCompactJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.flatten.json", descriptionKey: "page.settings.local.flatten.json.description", value: flattenJson, type: "checkbox", onEdit: async (value) => setFlattenJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.details.drawer", descriptionKey: "page.settings.local.details.drawer.description", value: forceDrawer, type: "checkbox", onEdit: async (value) => setForceDrawer(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.search.width", descriptionKey: "page.settings.local.search.width.description", value: searchWidth, type: "range", min: 400, max: Math.floor(window.innerWidth / 100) * 100, optional: true, onEdit: async (value) => setSearchWidth(value ? parseInt(value) : null) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.layout') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: hitLayout, exclusive: true, onChange: (_, value) => setHitLayout(value), children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.layout.description') }) }) }), _jsx(EditRow, { titleKey: "page.settings.local.hits.field_count", descriptionKey: "page.settings.local.hits.field_count.description", value: templateFieldCount, type: "range", min: 0, step: 1, max: 15, optional: true, onEdit: async (value) => setTemplateFieldCount(value ? parseInt(value) : null), valueLabelFormat: val => val.toString() }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.display_type') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: displayType, exclusive: true, onChange: (_, value) => setDisplayType(value), children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.display_type.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.results.count') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(Select, { size: "small", sx: { minWidth: '75px', textAlign: 'left' }, value: pageCount, onChange: event => setPageCount(typeof event.target.value === 'string' ? parseInt(event.target.value) : event.target.value), children: [_jsx(MenuItem, { value: 5, children: "5" }), _jsx(MenuItem, { value: 10, children: "10" }), _jsx(MenuItem, { value: 25, children: "25" }), _jsx(MenuItem, { value: 50, children: "50" }), _jsx(MenuItem, { value: 75, children: "75" }), _jsx(MenuItem, { value: 100, children: "100" }), _jsx(MenuItem, { value: 150, children: "150" }), _jsx(MenuItem, { value: 250, children: "250" })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.results.count.description') }) }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'local'))] }));
+    return (_jsxs(SettingsSection, { title: t('page.settings.local.title'), colSpan: 3, children: [_jsx(EditRow, { titleKey: "page.settings.local.compact.json", descriptionKey: "page.settings.local.compact.json.description", value: compactJson, type: "checkbox", onEdit: async (value) => setCompactJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.flatten.json", descriptionKey: "page.settings.local.flatten.json.description", value: flattenJson, type: "checkbox", onEdit: async (value) => setFlattenJson(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.details.drawer", descriptionKey: "page.settings.local.details.drawer.description", value: forceDrawer, type: "checkbox", onEdit: async (value) => setForceDrawer(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.show.hit.summary.graph", descriptionKey: "page.settings.local.show.hit.summary.graph.description", value: showHitSummaryGraph, type: "checkbox", onEdit: async (value) => setShowHitSummaryGraph(JSON.parse(value)) }), _jsx(EditRow, { titleKey: "page.settings.local.search.width", descriptionKey: "page.settings.local.search.width.description", value: searchWidth, type: "range", min: 400, max: Math.floor(window.innerWidth / 100) * 100, optional: true, onEdit: async (value) => setSearchWidth(value ? parseInt(value) : null) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.layout') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: hitLayout, exclusive: true, onChange: (_, value) => setHitLayout(value), children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.layout.description') }) }) }), _jsx(EditRow, { titleKey: "page.settings.local.hits.field_count", descriptionKey: "page.settings.local.hits.field_count.description", value: templateFieldCount, type: "range", min: 0, step: 1, max: 15, optional: true, onEdit: async (value) => setTemplateFieldCount(value ? parseInt(value) : null), valueLabelFormat: val => val.toString() }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.hits.display_type') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(ToggleButtonGroup, { size: "small", value: displayType, exclusive: true, onChange: (_, value) => setDisplayType(value), children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.hits.display_type.description') }) }) }), _jsxs(TableRow, { children: [_jsx(TableCell, { sx: CELL_SX, style: { whiteSpace: 'nowrap' }, children: t('page.settings.local.results.count') }), _jsx(TableCell, { sx: CELL_SX, colSpan: 2, align: "right", children: _jsxs(Select, { size: "small", sx: { minWidth: '75px', textAlign: 'left' }, value: pageCount, onChange: event => setPageCount(typeof event.target.value === 'string' ? parseInt(event.target.value) : event.target.value), children: [_jsx(MenuItem, { value: 5, children: "5" }), _jsx(MenuItem, { value: 10, children: "10" }), _jsx(MenuItem, { value: 25, children: "25" }), _jsx(MenuItem, { value: 50, children: "50" }), _jsx(MenuItem, { value: 75, children: "75" }), _jsx(MenuItem, { value: 100, children: "100" }), _jsx(MenuItem, { value: 150, children: "150" }), _jsx(MenuItem, { value: 250, children: "250" })] }) })] }), _jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('page.settings.local.results.count.description') }) }) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.settings`, 'local'))] }));
 };
 export default LocalSection;

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

@@ -1,7 +1,9 @@
 import type { Template } from '@cccsaurora/howler-ui/models/entities/generated/Template';
-import type { FC } from 'react';
+import { type FC } from 'react';
 declare const TemplateCard: FC<{
     template: Template;
+    onRemove?: (templateId: string) => void;
+    error?: boolean;
     className?: string;
 }>;
 export default TemplateCard;

package/components/routes/templates/TemplateCard.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Language, Lock, Person } from '@mui/icons-material';
-import { Card, Divider, Stack, Tooltip, Typography } from '@mui/material';
+import { Language, Lock, Person, ReportProblem } from '@mui/icons-material';
+import { Button, Card, Divider, Stack, Tooltip, Typography } from '@mui/material';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
+import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-const TemplateCard = ({ template, className }) => {
+const TemplateCard = ({ template, onRemove, error, className }) => {
     const { t } = useTranslation();
+    const { showModal } = useContext(ModalContext);
     return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Tooltip, { title: t(`route.templates.manager.${template.type}`), children: {
                         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)))] })] }) }, template.template_id));
+                    }[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('route.templates.manager.error.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('route.templates.manager.error.message') }) }) }) }))] }) }, template.template_id));
 };
 export default TemplateCard;

package/components/routes/templates/Templates.js

@@ -3,6 +3,7 @@ import { Article } from '@mui/icons-material';
 import { Stack, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
 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';
@@ -19,8 +20,9 @@ const TemplatesBase = () => {
     const navigate = useNavigate();
     const { dispatchApi } = useMyApi();
     const [searchParams, setSearchParams] = useSearchParams();
-    const { load } = useContext(TuiListMethodContext);
+    const { load, remove } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { analytics } = useContext(AnalyticContext);
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
     const [response, setResponse] = useState(null);
@@ -57,17 +59,22 @@ const TemplatesBase = () => {
     }, [phrase, setSearchParams, searchParams, user.username, types, dispatchApi, pageCount, offset]);
     // Load the items into list when response changes.
     // This hook should only trigger when the 'response' changes.
+    // or if the analytic list changes to refresh the disabled state
     useEffect(() => {
         if (response) {
             load(response.items.map((item) => ({
                 id: item.template_id,
                 item,
                 selected: false,
-                cursor: false
+                cursor: false,
+                disabled: item.detection &&
+                    !analytics
+                        .find(v => v.name === item.analytic)
+                        ?.detections?.map((s) => s.toLowerCase())
+                        ?.includes(item.detection?.toLowerCase())
             })));
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [response, load]);
+    }, [response, load, analytics]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
             searchParams.set('offset', _offset.toString());
@@ -96,12 +103,22 @@ const TemplatesBase = () => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [offset]);
-    const renderer = useCallback((item, className) => _jsx(TemplateCard, { template: item, className: className }), []);
+    const removeTemplate = useCallback(async (templateId) => {
+        await dispatchApi(api.template.del(templateId), {
+            logError: false,
+            showError: true,
+            throwError: false
+        });
+        remove(templateId);
+    }, [dispatchApi, remove]);
+    const renderer = useCallback((item, error, className) => (_jsx(TemplateCard, { template: item, error: error, onRemove: removeTemplate, className: className })), [removeTemplate]);
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchFilters: _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr', alignSelf: 'start' }, size: "small", value: types, onChange: (__, _types) => {
                     if (_types) {
                         setTypes(_types.length < 2 ? _types : []);
                     }
-                }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.templates.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.templates.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.templates.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/templates/view?type=${item.item.type}&analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`), onCreate: () => navigate('/templates/view'), createPrompt: "route.templates.create", searchPrompt: "route.templates.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
+                }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.templates.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.templates.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.templates.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, !!item.disabled, classRenderer()), response: response, onSelect: (item) => {
+            navigate(`/templates/view?type=${item.item.type}&analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`);
+        }, onCreate: () => navigate('/templates/view'), createPrompt: "route.templates.create", searchPrompt: "route.templates.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
 };
 const Templates = () => {
     return (_jsx(TuiListProvider, { children: _jsx(TemplatesBase, {}) }));

package/locales/en/translation.json

@@ -1,9 +1,9 @@
 {
     "*": "All values",
+    "actions.error": "Action \"{{action}}\" had error(s): {{messages}}",
     "actions.running": "Action \"{{action}}\" is executing.",
-    "actions.succeeded": "Action \"{{action}}\" completed successfully.",
     "actions.skipped": "Action \"{{action}}\" was skipped: {{messages}}",
-    "actions.error": "Action \"{{action}}\" had error(s): {{messages}}",
+    "actions.succeeded": "Action \"{{action}}\" completed successfully.",
     "add": "Add",
     "adminmenu": "Admin menu",
     "adminmenu.config": "Configuration",
@@ -386,6 +386,8 @@
     "page.settings.local.results.count.description": "How many results should we show per page when showing search results?",
     "page.settings.local.search.width": "Maximum Results Width",
     "page.settings.local.search.width.description": "The maximum size (in pixels) the results column in the search page.",
+    "page.settings.local.show.hit.summary.graph": "Show the Hit Summary Graph in Hit Search",
+    "page.settings.local.show.hit.summary.graph.description": "Shows the Hit Summary Graph in the Hit Search",
     "page.settings.local.title": "UI Preferences",
     "page.settings.profile.table.email": "Email",
     "page.settings.profile.table.groups": "Groups",
@@ -670,6 +672,10 @@
     "route.templates.manager.personal": "Personal",
     "route.templates.manager.readonly": "Built-in",
     "route.templates.manager.search": "Search Templates",
+    "route.templates.manager.error.message": "Invalid Detection",
+    "route.templates.manager.error.action": "Click to open quick fix options",
+    "route.templates.manager.error.modal.title": "Template detection no longer exists",
+    "route.templates.manager.error.modal.description": "The template fields are read only and will not be used. Do you want to remove the template?",
     "route.templates.personal": "Personal",
     "route.templates.prompt": "Activate autocomplete using [ctrl + space].",
     "route.templates.readonly.warning": "This is a built-in template, and cannot be edited. To make changes to it, contact",

package/locales/fr/translation.json

@@ -2,10 +2,10 @@
     "*": "Toutes les valeurs",
     "Protected B": "Protégé B",
     "Unclassified//Official Use Only": "Non classé//Réservé à des fins officielles",
+    "actions.error": "Action \"{{action}}\" a rencontré une ou des erreur(s): {{messages}}",
     "actions.running": "Action \"{{action}}\" s'exécute.",
-    "actions.succeeded": "Action \"{{action}}\" achevé avec succès.",
     "actions.skipped": "Action \"{{action}}\" a été ignorée: {{messages}}",
-    "actions.error": "Action \"{{action}}\" a rencontré une ou des erreur(s): {{messages}}",
+    "actions.succeeded": "Action \"{{action}}\" achevé avec succès.",
     "add": "Ajouter",
     "adminmenu": "Menu d'administration",
     "adminmenu.config": "Configuration",
@@ -391,6 +391,8 @@
     "page.settings.local.results.count.description": "Combien de résultats devons-nous afficher par page lors de l'affichage des résultats de recherche ?",
     "page.settings.local.search.width": "Largeur maximale des résultats",
     "page.settings.local.search.width.description": "Taille maximale (en pixels) de la colonne des résultats dans la page de recherche.",
+    "page.settings.local.show.hit.summary.graph": "Afficher le graphique du résumé des résultats dans le volet Résumé des résultats",
+    "page.settings.local.show.hit.summary.graph.description": "Affiche le graphique du résumé des résultats dans le volet Résumé des résultats",
     "page.settings.local.title": "Préférences de l'interface utilisateur",
     "page.settings.profile.table.email": "Courriel",
     "page.settings.profile.table.groups": "Groupes",
@@ -674,6 +676,10 @@
     "route.templates.manager.personal": "Personnel",
     "route.templates.manager.readonly": "Intégré",
     "route.templates.manager.search": "Rechercher les modèles",
+    "route.templates.manager.error.message": "Détection non valide",
+    "route.templates.manager.error.action": "Cliquez ici pour afficher les options de correction rapide",
+    "route.templates.manager.error.modal.title": "La détection du modèle n'existe plus",
+    "route.templates.manager.error.modal.description": "Les clés du modèle sont en lecture seule et ne seront pas utilisées. Voulez-vous supprimer le modèle ?",
     "route.templates.personal": "Personnel",
     "route.templates.prompt": "Activer l'autocomplétion en utilisant [ctrl + espace].",
     "route.templates.readonly.warning": "Il s'agit d'un modèle intégré qui ne peut pas être modifié. Pour le modifier, veuillez contacter",

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.19.0-dev.920",
+  "version": "2.19.0-dev.922",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",

package/utils/constants.d.ts

@@ -49,6 +49,7 @@ export declare enum StorageKey {
     COMPACT_JSON = "compact_json_view",
     FLATTEN_JSON = "flatten_json_view",
     FORCE_DRAWER = "force_drawer",
+    SHOW_HIT_SUMMARY_GRAPH = "show_hit_summary_graph",
     LAST_VIEW = "last_view",
     ONLY_RULES = "only_rules",
     PAGE_COUNT = "page_count",

package/utils/constants.js

@@ -54,6 +54,7 @@ export var StorageKey;
     StorageKey["COMPACT_JSON"] = "compact_json_view";
     StorageKey["FLATTEN_JSON"] = "flatten_json_view";
     StorageKey["FORCE_DRAWER"] = "force_drawer";
+    StorageKey["SHOW_HIT_SUMMARY_GRAPH"] = "show_hit_summary_graph";
     StorageKey["LAST_VIEW"] = "last_view";
     StorageKey["ONLY_RULES"] = "only_rules";
     StorageKey["PAGE_COUNT"] = "page_count";