@cccsaurora/howler-ui 2.13.0-dev.107 → 2.13.0-dev.125

package/components/elements/hit/HitSummary.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, 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';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
@@ -19,11 +19,11 @@ import PluginChip from '../PluginChip';
 import HitGraph from './aggregate/HitGraph';
 const HitSummary = ({ query, response, onStart, onComplete }) => {
     const { t } = useTranslation();
-    const getMatchingTemplate = useContextSelector(TemplateContext, ctx => ctx.getMatchingTemplate);
     const { dispatchApi } = useMyApi();
     const { hitFields } = useContext(FieldContext);
     const { showErrorMessage } = useMySnackbar();
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { getMatchingTemplate } = useMatchers();
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
     const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
@@ -48,16 +48,17 @@ const HitSummary = ({ query, response, onStart, onComplete }) => {
         }
         try {
             // Get a list of every key in every template of the hits we're searching
-            const _keyCounts = (response?.items ?? [])
-                .flatMap(h => {
-                const matchingTemplate = getMatchingTemplate(h);
+            const rawCounts = await Promise.all((response?.items ?? []).map(async (h) => {
+                const matchingTemplate = await getMatchingTemplate(h);
                 return (matchingTemplate?.keys ?? [])
                     .filter(key => !['howler.id', 'howler.hash'].includes(key))
                     .map(key => ({
                     key,
                     source: `${matchingTemplate.analytic}: ${matchingTemplate.detection ?? t('any')}`
                 }));
-            })
+            }));
+            const _keyCounts = rawCounts
+                .flat()
                 .concat(customKeys.map(key => ({ key, source: 'custom' })))
                 // Take that array and reduce it to unique keys and the number of times we see it,
                 // as well as the templates we sourced this key from

package/components/elements/hit/related/PivotLink.js

@@ -34,9 +34,16 @@ const PivotLink = ({ pivot, hit, compact = false }) => {
     if (href) {
         return (_jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, children: _jsx(Icon, { fontSize: "1.5rem", icon: pivot.icon }) }));
     }
-    const pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });
-    if (pluginPivot) {
-        return pluginPivot;
+    try {
+        const pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });
+        if (pluginPivot) {
+            return pluginPivot;
+        }
+    }
+    catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn(`Pivot plugin for format ${pivot.format} does not exist, not rendering`);
+        return null;
     }
     return _jsx(Skeleton, { variant: "rounded" });
 };

package/components/routes/analytics/AnalyticTemplates.js

@@ -1,24 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Article } from '@mui/icons-material';
 import { Box, Fab, Skeleton, Stack, Typography, useMediaQuery } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
 import 'chartjs-adapter-moment';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
 import TemplateCard from '../templates/TemplateCard';
 const AnalyticTemplates = ({ analytic }) => {
     const { t } = useTranslation();
     const isNarrow = useMediaQuery('(max-width: 1800px)');
-    const getTemplates = useContextSelector(TemplateContext, ctx => ctx.getTemplates);
-    const templates = useContextSelector(TemplateContext, ctx => ctx.templates.filter(_template => _template.analytic === analytic?.name));
+    const { dispatchApi } = useMyApi();
+    const [templates, setTemplates] = useState([]);
     const [loading, setLoading] = useState(false);
     useEffect(() => {
         setLoading(true);
-        getTemplates().finally(() => setLoading(false));
-    }, [getTemplates]);
+        dispatchApi(api.template.get())
+            .then(_templates => _templates.filter(_template => _template.analytic === analytic?.name))
+            .then(setTemplates)
+            .finally(() => setLoading(false));
+    }, [analytic?.name, dispatchApi]);
     if (!analytic) {
         return _jsx(Skeleton, { variant: "rounded", width: "100%", sx: { minHeight: '300px', mt: 2 } });
     }

package/components/routes/hits/search/InformationPane.js

@@ -3,10 +3,9 @@ import { Clear, Code, Comment, DataObject, History, LinkSharp, OpenInNew, QueryS
 import { Badge, Box, Divider, Skeleton, Stack, Tab, Tabs, Tooltip, useTheme } from '@mui/material';
 import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
 import { Icon } from '@iconify/react/dist/iconify.js';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
-import { DossierContext } from '@cccsaurora/howler-ui/components/app/providers/DossierProvider';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
@@ -48,13 +47,13 @@ const InformationPane = ({ onClose }) => {
     const location = useLocation();
     const { emit, isOpen } = useContext(SocketContext);
     const { getAnalyticFromName } = useContext(AnalyticContext);
-    const { getMatchingOverview, refresh } = useContext(OverviewContext);
+    const { getMatchingOverview, getMatchingDossiers } = useMatchers();
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const pluginStore = usePluginStore();
-    const getMatchingDossiers = useContextSelector(DossierContext, ctx => ctx.getMatchingDossiers);
     const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
     const [userIds, setUserIds] = useState(new Set());
     const [analytic, setAnalytic] = useState();
+    const [hasOverview, setHasOverview] = useState(false);
     const [tab, setTab] = useState('overview');
     const [loading, setLoading] = useState(false);
     const [dossiers, setDossiers] = useState([]);
@@ -63,33 +62,28 @@ const InformationPane = ({ onClose }) => {
     howlerPluginStore.plugins.forEach(plugin => {
         pluginStore.executeFunction(`${plugin}.on`, 'viewing');
     });
+    useEffect(() => {
+        getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
+    }, [getMatchingOverview, hit]);
     useEffect(() => {
         if (!selected) {
             return;
         }
-        (async () => {
-            if (selected && !hit) {
-                setLoading(true);
-                try {
-                    await getHit(selected, true);
-                }
-                finally {
-                    setLoading(false);
-                    return;
-                }
-            }
-            else if (!hit?.howler.data) {
-                getHit(selected, true);
-            }
-            setUserIds(getUserList(hit));
-            setAnalytic(await getAnalyticFromName(hit.howler.analytic));
-            if (tab === 'hit_aggregate' && !hit.howler.is_bundle) {
-                setTab('overview');
-            }
-        })();
+        if (!hit?.howler.data) {
+            setLoading(true);
+            getHit(selected, true).finally(() => setLoading(false));
+            return;
+        }
+        setUserIds(getUserList(hit));
+        getAnalyticFromName(hit.howler.analytic).then(setAnalytic);
+        getMatchingDossiers(hit).then(setDossiers);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getAnalyticFromName, getHit, selected, tab]);
-    const matchingOverview = useMemo(() => getMatchingOverview(hit), [getMatchingOverview, hit]);
+    }, [getAnalyticFromName, getHit, selected]);
+    useEffect(() => {
+        if (tab === 'hit_aggregate' && !hit?.howler.is_bundle) {
+            setTab('overview');
+        }
+    }, [hit?.howler.is_bundle, tab]);
     useEffect(() => {
         if (selected && isOpen()) {
             emit({
@@ -105,17 +99,14 @@ const InformationPane = ({ onClose }) => {
         }
     }, [emit, selected, isOpen]);
     useEffect(() => {
-        refresh();
-    }, [refresh]);
-    useEffect(() => {
-        if (matchingOverview && tab === 'details') {
+        if (hasOverview && tab === 'details') {
             setTab('overview');
         }
-        else if (!matchingOverview && tab === 'overview') {
+        else if (!hasOverview && tab === 'overview') {
             setTab('details');
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [matchingOverview]);
+    }, [hasOverview]);
     /**
      * What to show as the header? If loading a skeleton, then it depends on bundle or not. Bundles don't
      * show anything while normal hits do
@@ -151,12 +142,6 @@ const InformationPane = ({ onClose }) => {
             ])))
         }[tab]?.();
     }, [dossiers, hit, loading, tab, users]);
-    useEffect(() => {
-        if (!hit) {
-            return;
-        }
-        getMatchingDossiers(hit.howler.id).then(setDossiers);
-    }, [getMatchingDossiers, hit]);
     return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [_jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, sx: [hit?.howler?.is_bundle && { position: 'absolute', top: 1, right: 0, zIndex: 1100 }], children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('hit.panel.analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles, disabled: loading }), !!hit && !hit.howler.is_bundle && (_jsx(TuiIconButton, { tooltip: t('hit.panel.open'), href: `/hits/${selected}`, disabled: !hit || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), _jsx(Box, { pr: 2, children: header }), !!hit &&
                         !hit.howler.is_bundle &&
                         (!loading ? (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: hit, layout: HitLayout.DENSE }), _jsx(HitLabels, { hit: hit })] })) : (_jsx(Skeleton, { height: 124 }))), (hit?.howler?.links?.length > 0 ||
@@ -166,7 +151,7 @@ const InformationPane = ({ onClose }) => {
                                     .slice(0, 3)
                                     .map(l => _jsx(RelatedLink, { compact: true, ...l }, l.href)), dossiers.flatMap(_dossier => (_dossier.pivots ?? []).map((_pivot, index) => (
                             // eslint-disable-next-line react/no-array-index-key
-                            _jsx(PivotLink, { pivot: _pivot, hit: hit, compact: true }, _dossier.dossier_id + index))))] })), _jsx(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: _jsxs(Tabs, { value: tab === 'overview' && !matchingOverview ? 'details' : tab, sx: {
+                            _jsx(PivotLink, { pivot: _pivot, hit: hit, compact: true }, _dossier.dossier_id + index))))] })), _jsx(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 pr: 2,
@@ -195,7 +180,7 @@ const InformationPane = ({ onClose }) => {
                                                     right: theme.spacing(-0.5)
                                                 },
                                                 '& > svg': { zIndex: 2 }
-                                            }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), matchingOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                                            }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
                                 // eslint-disable-next-line react/no-array-index-key
                                 , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => _dossier.leads?.map((_lead, leadIndex) => (_jsx(Tab
                                 // eslint-disable-next-line react/no-array-index-key

package/components/routes/hits/search/SearchPane.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Close, ErrorOutline, List, TableChart, Terminal } from '@mui/icons-material';
+import { Close, ErrorOutline, List, SavedSearch, TableChart, Terminal } from '@mui/icons-material';
 import { Box, IconButton, LinearProgress, Stack, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
@@ -7,7 +7,6 @@ import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCente
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
@@ -82,7 +81,6 @@ const SearchPane = () => {
     const location = useLocation();
     const navigate = useNavigate();
     const routeParams = useParams();
-    const refresh = useContextSelector(TemplateContext, ctx => ctx.refresh);
     const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
     const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
     const query = useContextSelector(ParameterContext, ctx => ctx.query);
@@ -109,10 +107,6 @@ const SearchPane = () => {
         }
         return selectedElement.id;
     }, []);
-    // Load the index field for a hit in order to provide autocomplete suggestions.
-    useEffect(() => {
-        refresh();
-    }, [refresh]);
     useEffect(() => {
         if (location.pathname.startsWith('/bundles')) {
             getHit(routeParams.id);
@@ -126,7 +120,7 @@ const SearchPane = () => {
                                             ], onClick: () => {
                                                 clearSelectedHits(bundleHit.howler.id);
                                                 setSelected(bundleHit.howler.id);
-                                            }, children: _jsx(HitBanner, { hit: bundleHit, layout: HitLayout.DENSE, useListener: true }) }) }) }) })), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", children: t('hit.search.prompt') }), error && (_jsx(Tooltip, { title: `${t('route.advanced.error')}: ${error}`, children: _jsx(ErrorOutline, { fontSize: "small", color: "error" }) })), _jsx(FlexOne, {}), bundleHit?.howler.bundles.length > 0 && _jsx(BundleParentMenu, { bundle: bundleHit }), bundleHit && (_jsx(Tooltip, { title: t('hit.bundle.close'), children: _jsx(IconButton, { size: "small", onClick: () => navigate('/search'), children: _jsx(Close, {}) }) })), _jsx(Tooltip, { title: t('route.actions.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/action/execute?query=${query}`, children: _jsx(Terminal, {}) }) }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] })] }), _jsxs(VSBoxHeader, { ml: -3, mr: -3, px: 2, pb: 1, sx: { zIndex: 999 }, children: [_jsxs(Stack, { sx: { pt: 1 }, children: [_jsxs(Stack, { sx: { position: 'relative', flex: 1 }, children: [_jsx(HitQuery, { disabled: viewId && !selectedView, searching: searching, triggerSearch: triggerSearch }), searching && (_jsx(LinearProgress, { sx: theme => ({
+                                            }, children: _jsx(HitBanner, { hit: bundleHit, layout: HitLayout.DENSE, useListener: true }) }) }) }) })), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { sx: { color: 'text.secondary', fontSize: '0.9em', fontStyle: 'italic', mb: 0.5 }, variant: "body2", children: t('hit.search.prompt') }), error && (_jsx(Tooltip, { title: `${t('route.advanced.error')}: ${error}`, children: _jsx(ErrorOutline, { fontSize: "small", color: "error" }) })), _jsx(FlexOne, {}), bundleHit?.howler.bundles.length > 0 && _jsx(BundleParentMenu, { bundle: bundleHit }), bundleHit && (_jsx(Tooltip, { title: t('hit.bundle.close'), children: _jsx(IconButton, { size: "small", onClick: () => navigate('/search'), children: _jsx(Close, {}) }) })), _jsx(Tooltip, { title: t('route.views.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/views/create?query=${query}`, children: _jsx(SavedSearch, {}) }) }), _jsx(Tooltip, { title: t('route.actions.save'), children: _jsx(IconButton, { component: Link, disabled: !query, to: `/action/execute?query=${query}`, children: _jsx(Terminal, {}) }) }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", children: [_jsx(ToggleButton, { value: "list", children: _jsx(List, {}) }), _jsx(ToggleButton, { value: "grid", children: _jsx(TableChart, {}) })] })] })] }), _jsxs(VSBoxHeader, { ml: -3, mr: -3, px: 2, pb: 1, sx: { zIndex: 999 }, children: [_jsxs(Stack, { sx: { pt: 1 }, children: [_jsxs(Stack, { sx: { position: 'relative', flex: 1 }, children: [_jsx(HitQuery, { disabled: viewId && !selectedView, searching: searching, triggerSearch: triggerSearch }), searching && (_jsx(LinearProgress, { sx: theme => ({
                                                     position: 'absolute',
                                                     left: 0,
                                                     right: 0,

package/components/routes/hits/search/grid/AddColumnModal.js

@@ -1,21 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Add, Check } from '@mui/icons-material';
 import { Autocomplete, Chip, Divider, Grid, IconButton, Popover, Stack, TextField } from '@mui/material';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
 import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
-import { sortBy, uniq } from 'lodash-es';
-import { memo, useContext, useMemo, useState } from 'react';
+import { has, sortBy, uniq } from 'lodash-es';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 const AddColumnModal = ({ open, onClose, anchorEl, addColumn, columns }) => {
     const { t } = useTranslation();
     const { hitFields } = useContext(FieldContext);
     const response = useContextSelector(HitSearchContext, ctx => ctx.response);
-    const getMatchingTemplate = useContextSelector(TemplateContext, ctx => ctx.getMatchingTemplate);
+    const { getMatchingTemplate } = useMatchers();
     const [columnToAdd, setColumnToAdd] = useState(null);
     const options = useMemo(() => hitFields.map(field => field.key), [hitFields]);
-    const suggestions = useMemo(() => uniq((response?.items ?? []).flatMap(_hit => getMatchingTemplate(_hit)?.keys ?? [])), [getMatchingTemplate, response?.items]);
+    const [suggestions, setSuggestions] = useState([]);
+    useEffect(() => {
+        (async () => {
+            setSuggestions(uniq((await Promise.all((response?.items ?? []).map(async (_hit) => (has(_hit, '__template') ? _hit.__template?.keys : (await getMatchingTemplate(_hit))?.keys) ?? []))).flat()));
+        })();
+    }, [getMatchingTemplate, response?.items]);
     return (_jsx(Popover, { open: open, onClose: onClose, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { sx: { flex: 1 }, size: "small", options: options, value: columnToAdd, renderInput: params => _jsx(TextField, { fullWidth: true, placeholder: t('hit.fields'), ...params }), onChange: (_ev, value) => setColumnToAdd(value) }), _jsx(IconButton, { disabled: !columnToAdd, onClick: () => {
                                 addColumn(columnToAdd);
                                 setColumnToAdd(null);

package/components/routes/hits/view/HitViewer.js

@@ -3,11 +3,9 @@ import { Icon } from '@iconify/react/dist/iconify.js';
 import { Code, Comment, DataObject, History, LinkSharp, QueryStats, ViewAgenda } from '@mui/icons-material';
 import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, useMediaQuery, useTheme } from '@mui/material';
 import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/AnalyticProvider';
-import { DossierContext } from '@cccsaurora/howler-ui/components/app/providers/DossierProvider';
 import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { OverviewContext } from '@cccsaurora/howler-ui/components/app/providers/OverviewProvider';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
 import BundleButton from '@cccsaurora/howler-ui/components/elements/display/icons/BundleButton';
@@ -49,10 +47,8 @@ const HitViewer = () => {
     const theme = useTheme();
     const isUnderLg = useMediaQuery(theme.breakpoints.down('lg'));
     const [orientation, setOrientation] = useMyLocalStorageItem(StorageKey.VIEWER_ORIENTATION, Orientation.VERTICAL);
-    const refreshTemplates = useContextSelector(TemplateContext, ctx => ctx.refresh);
     const { getAnalyticFromName } = useContext(AnalyticContext);
-    const { getMatchingOverview, refresh: refreshOverviews } = useContext(OverviewContext);
-    const getMatchingDossiers = useContextSelector(DossierContext, ctx => ctx.getMatchingDossiers);
+    const { getMatchingOverview, getMatchingDossiers } = useMatchers();
     const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
     const hit = useContextSelector(HitContext, ctx => ctx.hits[params.id]);
     const [userIds, setUserIds] = useState(new Set());
@@ -60,22 +56,22 @@ const HitViewer = () => {
     const [tab, setTab] = useState('details');
     const [analytic, setAnalytic] = useState();
     const [dossiers, setDossiers] = useState([]);
+    const [hasOverview, setHasOverview] = useState(false);
     const fetchData = useCallback(async () => {
         try {
-            let existingHit = hit;
-            if (!existingHit) {
-                existingHit = await getHit(params.id, true);
+            if (!hit) {
+                await getHit(params.id, true);
+                return;
             }
-            setUserIds(getUserList(existingHit));
-            setAnalytic(await getAnalyticFromName(existingHit.howler.analytic));
+            setUserIds(getUserList(hit));
+            setAnalytic(await getAnalyticFromName(hit.howler.analytic));
         }
         catch (err) {
             if (err.cause?.api_status_code === 404) {
                 navigate('/404');
             }
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getAnalyticFromName, getHit, params.id, navigate]);
+    }, [hit, getAnalyticFromName, getHit, params.id, navigate]);
     useEffect(() => {
         if (isUnderLg) {
             setOrientation(Orientation.HORIZONTAL);
@@ -83,22 +79,20 @@ const HitViewer = () => {
     }, [isUnderLg, setOrientation]);
     useEffect(() => {
         fetchData();
-    }, [params.id, fetchData]);
+    }, [params.id, fetchData, hit]);
     const onOrientationChange = useCallback(() => setOrientation(orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL), [orientation, setOrientation]);
-    const matchingOverview = useMemo(() => getMatchingOverview(hit), [getMatchingOverview, hit]);
     useEffect(() => {
-        refreshTemplates();
-        refreshOverviews();
-    }, [refreshOverviews, refreshTemplates]);
+        getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
+    }, [getMatchingOverview, hit]);
     useEffect(() => {
-        if (matchingOverview && tab === 'details') {
+        if (hasOverview && tab === 'details') {
             setTab('overview');
         }
-        else if (!matchingOverview && tab === 'overview') {
+        else if (!hasOverview && tab === 'overview') {
             setTab('details');
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [matchingOverview]);
+    }, [hasOverview]);
     const tabContent = useMemo(() => {
         if (!tab || !hit) {
             return;
@@ -122,7 +116,7 @@ const HitViewer = () => {
         if (!hit) {
             return;
         }
-        getMatchingDossiers(hit.howler.id).then(setDossiers);
+        getMatchingDossiers(hit).then(setDossiers);
     }, [getMatchingDossiers, hit]);
     if (!hit) {
         return (_jsx(PageCenter, { children: _jsx(Skeleton, { variant: "rounded", height: "520px" }) }));
@@ -150,7 +144,7 @@ const HitViewer = () => {
                                 position: 'absolute',
                                 top: theme.spacing(2),
                                 right: theme.spacing(-6)
-                            }, children: [_jsx(Tooltip, { title: t('page.hits.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('hit.panel.analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles })] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !matchingOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), matchingOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                            }, children: [_jsx(Tooltip, { title: t('page.hits.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('hit.panel.analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles })] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
                             // eslint-disable-next-line react/no-array-index-key
                             , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => _dossier.leads?.map((_lead, leadIndex) => (_jsx(Tab
                             // eslint-disable-next-line react/no-array-index-key

package/components/routes/templates/TemplateViewer.js

@@ -5,22 +5,17 @@ import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCente
 import TemplateEditor from '@cccsaurora/howler-ui/components/routes/templates/TemplateEditor';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Check, Delete, Remove, SsidChart } from '@mui/icons-material';
+import { Check, Delete, SsidChart } from '@mui/icons-material';
 import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppInfoPanel';
-import { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
-import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import HitOutline, { DEFAULT_FIELDS } from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
+import { DEFAULT_FIELDS } from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import isEqual from 'lodash-es/isEqual';
 import { useSearchParams } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
 import hitsData from '@cccsaurora/howler-ui/utils/hit.json';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
-const CUSTOM_OUTLINES = ['cmt.aws.sigma.rules', 'assemblyline', '6tailphish'];
 const TemplateViewer = () => {
     const { t } = useTranslation();
     const [params, setParams] = useSearchParams();
-    const getTemplates = useContextSelector(TemplateContext, ctx => ctx.getTemplates);
     const { dispatchApi } = useMyApi();
     const [templateList, setTemplateList] = useState([]);
     const [selectedTemplate, setSelectedTemplate] = useState(null);
@@ -47,32 +42,33 @@ const TemplateViewer = () => {
             }
             setAnalytics(_analytics);
         });
-        getTemplates(true).then(setTemplateList);
+        dispatchApi(api.template.get()).then(setTemplateList);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [analytic, dispatchApi]);
     useEffect(() => {
-        if (analytic) {
-            setLoading(true);
-            dispatchApi(api.search.grouped.hit.post('howler.detection', {
-                limit: 0,
-                query: `howler.analytic:"${sanitizeLuceneQuery(analytic)}"`
-            }), {
-                logError: false,
-                showError: true,
-                throwError: true
-            })
-                .finally(() => setLoading(false))
-                .then(result => result.items.map(i => i.value))
-                .then(_detections => {
-                if (_detections.length < 1 || (type === 'global' && CUSTOM_OUTLINES.includes(analytic.toLowerCase()))) {
-                    setDetection('ANY');
-                }
-                if (detection && !_detections.includes(detection)) {
-                    setDetection('ANY');
-                }
-                setDetections(_detections);
-            });
+        if (!analytic) {
+            return;
         }
+        setLoading(true);
+        dispatchApi(api.search.grouped.hit.post('howler.detection', {
+            limit: 0,
+            query: `howler.analytic:"${sanitizeLuceneQuery(analytic)}"`
+        }), {
+            logError: false,
+            showError: true,
+            throwError: true
+        })
+            .finally(() => setLoading(false))
+            .then(result => result.items.map(i => i.value))
+            .then(_detections => {
+            if (_detections.length < 1) {
+                setDetection('ANY');
+            }
+            if (detection && !_detections.includes(detection)) {
+                setDetection('ANY');
+            }
+            setDetections(_detections);
+        });
     }, [analytic, detection, dispatchApi, params, setParams, type]);
     useEffect(() => {
         if (analytic && detection) {
@@ -149,17 +145,12 @@ const TemplateViewer = () => {
             }
         }
     }, [analytic, detection, dispatchApi, displayFields, selectedTemplate, templateList, type]);
-    const isCustomOutline = useMemo(() => CUSTOM_OUTLINES.includes(analytic.toLowerCase()), [analytic]);
     const analyticOrDetectionMissing = useMemo(() => !analytic || !detection, [analytic, detection]);
     const noFieldChange = useMemo(() => displayFields.length < 1 || isEqual(selectedTemplate?.keys ?? DEFAULT_FIELDS, displayFields), [displayFields, selectedTemplate?.keys]);
-    return (_jsxs(PageCenter, { maxWidth: "1500px", 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: { flex: 1, maxWidth: '450px' }, 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: (__, newValue) => setAnalytic(newValue ? newValue.name : ''), 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 || (isCustomOutline && type === 'global'), children: _jsx(Autocomplete, { id: "detection", options: ['ANY', ...detections.sort()], getOptionLabel: option => option, value: isCustomOutline && type === 'global' ? 'any' : (detection ?? ''), onChange: (__, newValue) => setDetection(newValue), 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) => {
+    return (_jsxs(PageCenter, { maxWidth: "1500px", 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: { flex: 1, maxWidth: '450px' }, 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: (__, newValue) => setAnalytic(newValue ? newValue.name : ''), 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), 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) {
                                         setType(_type);
                                     }
-                                }, children: [_jsx(ToggleButton, { sx: { flex: 1 }, value: "personal", "aria-label": "personal", children: t('route.templates.personal') }), _jsx(ToggleButton, { sx: { flex: 1 }, value: "global", "aria-label": "global", children: t('route.templates.global') })] }), selectedTemplate && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || (isCustomOutline && type === 'global') || noFieldChange, startIcon: templateLoading ? (_jsx(CircularProgress, { size: 16 })) : isCustomOutline && type === 'global' ? (_jsx(Remove, {})) : (_jsx(Check, {})), onClick: onSave, children: t(isCustomOutline && type === 'global'
-                                    ? 'button.readonly'
-                                    : !analyticOrDetectionMissing && !noFieldChange
-                                        ? 'button.save'
-                                        : 'button.saved') })] }), isCustomOutline && type === 'global' ? (_jsx(HitOutline, { hit: exampleHit, layout: HitLayout.COMFY, type: "global" })) : analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.templates.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsx(TemplateEditor, { hit: exampleHit, fields: displayFields, setFields: setDisplayFields, onAdd: field => setDisplayFields([...displayFields, field]), onRemove: field => setDisplayFields(displayFields.filter(f => f !== field)) }))] })] }));
+                                }, children: [_jsx(ToggleButton, { sx: { flex: 1 }, value: "personal", "aria-label": "personal", children: t('route.templates.personal') }), _jsx(ToggleButton, { sx: { flex: 1 }, value: "global", "aria-label": "global", children: t('route.templates.global') })] }), selectedTemplate && (_jsx(Button, { variant: "outlined", startIcon: _jsx(Delete, {}), onClick: onDelete, children: t('button.delete') })), _jsx(Button, { variant: "outlined", disabled: analyticOrDetectionMissing || noFieldChange, startIcon: templateLoading ? _jsx(CircularProgress, { size: 16 }) : _jsx(Check, {}), onClick: onSave, children: t(!analyticOrDetectionMissing && !noFieldChange ? 'button.save' : 'button.saved') })] }), analyticOrDetectionMissing ? (_jsx(AppInfoPanel, { i18nKey: "route.templates.select", sx: { width: '100%', alignSelf: 'start' } })) : (_jsx(TemplateEditor, { hit: exampleHit, fields: displayFields, setFields: setDisplayFields, onAdd: field => setDisplayFields([...displayFields, field]), onRemove: field => setDisplayFields(displayFields.filter(f => f !== field)) }))] })] }));
 };
 export default TemplateViewer;

package/components/routes/templates/Templates.js

@@ -1,18 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Article, KeyboardArrowDown } from '@mui/icons-material';
-import { Box, Card, Collapse, IconButton, Stack, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
+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 { TemplateContext } from '@cccsaurora/howler-ui/components/app/providers/TemplateProvider';
 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';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import TemplateCard from './TemplateCard';
 const TemplatesBase = () => {
@@ -22,11 +20,9 @@ const TemplatesBase = () => {
     const { dispatchApi } = useMyApi();
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
-    const templates = useContextSelector(TemplateContext, ctx => ctx.templates);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [showBuiltins, setShowBuiltins] = useState(true);
     const [response, setResponse] = useState(null);
     const [types, setTypes] = useState([]);
     const [hasError, setHasError] = useState(false);
@@ -100,15 +96,12 @@ const TemplatesBase = () => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [offset]);
-    const builtInTemplates = useMemo(() => templates.filter(template => template.type === 'readonly'), [templates]);
     const renderer = useCallback((item, className) => _jsx(TemplateCard, { template: item, className: className }), []);
     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') }), belowSearch: types.length !== 1 &&
-            offset < 1 &&
-            builtInTemplates.length > 0 && (_jsx(Card, { sx: { p: 1, mb: 1 }, children: _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { children: t('route.templates.builtin.show') }), _jsx(Tooltip, { title: t(`route.templates.builtin.${showBuiltins ? 'hide' : 'show'}`), children: _jsx(IconButton, { size: "small", onClick: () => setShowBuiltins(!showBuiltins), children: _jsx(KeyboardArrowDown, { fontSize: "small", sx: { transition: 'rotate 250ms', rotate: showBuiltins ? '180deg' : '0deg' } }) }) })] }), _jsxs(Collapse, { in: showBuiltins, children: [_jsx(Box, { sx: { mt: 1 } }), builtInTemplates.map(template => renderer(template))] })] }) })), 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, 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

@@ -639,6 +639,7 @@
     "route.views.manager.search": "Search Views",
     "route.views.manager.default": "Default View",
     "route.views.name": "View Name",
+    "route.views.save": "Save Query as View",
     "route.views.saved": "Pinned Views",
     "route.views.search.prompt": "Search by name, query, or owner.",
     "search.open": "Open Search",

package/locales/fr/translation.json

@@ -635,6 +635,7 @@
     "route.views.manager.readonly": "Intégré",
     "route.views.manager.search": "Rechercher les vues",
     "route.views.manager": "Gérer vue",
+    "route.views.save": "Enregistrer cette requête comme vue",
     "route.views.saved": "Vues épinglées",
     "route.views.show": "Voir les vues",
     "route.views": "Vues",