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

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;

package/components/routes/templates/Templates.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppUser } from '@tui/core';
 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 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';
@@ -13,9 +13,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 TemplateCard from './TemplateCard';
+const SearchResponseContext = createSearchResponseContext();
 const TemplatesBase = () => {
     const { t } = useTranslation();
     const { user } = useAppUser();
@@ -26,7 +27,7 @@ const TemplatesBase = () => {
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const { showSuccessMessage } = useMySnackbar();
     const { analytics } = useContext(AnalyticContext);
-    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
+    const { response, request, remove, getSearchRequestData } = useSearchResponseContext(SearchResponseContext);
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
     const [types, setTypes] = useState([]);
@@ -70,11 +71,11 @@ const TemplatesBase = () => {
                 item,
                 selected: false,
                 cursor: false,
-                disabled: item.detection &&
+                disabled: !!(item.detection &&
                     !analytics
                         .find(v => v.name === item.analytic)
                         ?.detections?.map((s) => s.toLowerCase())
-                        ?.includes(item.detection?.toLowerCase())
+                        ?.includes(item.detection?.toLowerCase()))
             })));
         }
     }, [response, load, analytics]);
@@ -95,7 +96,7 @@ const TemplatesBase = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dispatchApi, types]);
     useEffect(() => {
-        if (response?.total <= offset) {
+        if ((response?.total ?? 0) <= offset) {
             setOffset(0);
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
@@ -122,10 +123,10 @@ const TemplatesBase = () => {
                         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, !!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 : ''}`);
+            void 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(SearchResponseProvider, { idField: "template_id", children: _jsx(TemplatesBase, {}) }) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { context: SearchResponseContext, idField: "template_id", children: _jsx(TemplatesBase, {}) }) }));
 };
 export default Templates;

package/components/routes/views/ViewComposer.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppListEmpty, PageCenter } from '@tui/core';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { HelpOutline, Save, Settings } from '@mui/icons-material';
 import { Alert, Checkbox, CircularProgress, LinearProgress, Paper, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { GridColumnsContext } from '@cccsaurora/howler-ui/components/app/providers/GridColumnsProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
@@ -24,16 +23,17 @@ import AddColumnModal from '@cccsaurora/howler-ui/components/elements/hit/grid/A
 import RecordTable from '@cccsaurora/howler-ui/components/elements/hit/grid/RecordTable';
 import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import LayoutToggle, {} from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
+import LayoutToggle from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
 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';
 import { uniq } from 'lodash-es';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { DEFAULT_QUERY, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { convertDateToLucene } from '@cccsaurora/howler-ui/utils/utils';
 import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
+import { MembershipManagement } from '../../elements/membership/MembershipManagement';
 import ErrorBoundary from '../ErrorBoundary';
 import RecordQuery from '../hits/search/RecordQuery';
 import HitSort from '../hits/search/shared/HitSort';
@@ -52,6 +52,7 @@ const ViewComposer = () => {
     const setIndexes = useContextSelector(ParameterContext, ctx => ctx.setIndexes);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
     const loadRecords = useContextSelector(RecordContext, ctx => ctx.loadRecords);
+    const [view, setView] = useState();
     // view state
     const [title, setTitle] = useState('');
     const [type, setType] = useState('global');
@@ -79,22 +80,22 @@ const ViewComposer = () => {
             width: columnWidths[column] ?? null
         }));
         try {
-            const normalizedIndexes = indexes?.length > 0 ? indexes : ['hit'];
+            const normalizedIndexes = (indexes?.length ?? 0) > 0 ? indexes : ['hit'];
             if (!routeParams.id) {
                 const newView = await addView({
                     title,
                     type,
                     query,
                     indexes: normalizedIndexes,
-                    sort: sort || null,
-                    span: span || null,
+                    sort,
+                    span,
                     settings: {
                         advance_on_triage: advanceOnTriage,
                         display: displayType,
-                        columns: displayType === 'grid' ? _columnData : null
+                        columns: displayType === 'grid' ? _columnData : undefined
                     }
                 });
-                navigate(buildViewUrl(newView));
+                void navigate(buildViewUrl(newView));
             }
             else {
                 await editView(routeParams.id, {
@@ -107,14 +108,14 @@ const ViewComposer = () => {
                     settings: {
                         advance_on_triage: advanceOnTriage,
                         display: displayType,
-                        columns: displayType === 'grid' ? _columnData : null
+                        columns: displayType === 'grid' ? _columnData : undefined
                     }
                 });
             }
             showSuccessMessage(t(routeParams.id ? 'route.views.update.success' : 'route.views.create.success'));
         }
         catch (e) {
-            showErrorMessage(e.message);
+            showErrorMessage(e instanceof Error ? e.message : String(e));
         }
         finally {
             setLoading(false);
@@ -142,7 +143,7 @@ const ViewComposer = () => {
         setSearching(true);
         setError(null);
         try {
-            const normalizedIndexes = searchIndexes?.length > 0 ? searchIndexes : ['hit'];
+            const normalizedIndexes = (searchIndexes?.length ?? 0) > 0 ? searchIndexes : ['hit'];
             const _response = await dispatchApi(api.v2.search.post(normalizedIndexes, {
                 rows: pageCount,
                 query: searchQuery,
@@ -150,11 +151,17 @@ const ViewComposer = () => {
                 filters: searchSpan ? [`event.created:${convertDateToLucene(searchSpan)}`] : [],
                 metadata: ['template', 'analytic']
             }), { showError: false, throwError: true });
-            loadRecords(_response.items);
-            setResponse(_response);
+            const searchResponse = _response ?? {
+                items: [],
+                offset: 0,
+                rows: pageCount,
+                total: 0
+            };
+            loadRecords(searchResponse.items);
+            setResponse(searchResponse);
         }
         catch (e) {
-            setError(e.message);
+            setError(e instanceof Error ? e.message : String(e));
         }
         finally {
             setSearching(false);
@@ -183,30 +190,31 @@ const ViewComposer = () => {
             return;
         }
         void (async () => {
-            const viewToEdit = (await getCurrentViews({ views: [routeParams.id] }))[0];
-            if (!viewToEdit) {
+            const _view = (await getCurrentViews({ views: [routeParams.id] }))[0];
+            setView(_view);
+            if (!_view) {
                 setError('route.views.missing');
                 return;
             }
             else {
                 setError(null);
             }
-            setTitle(viewToEdit.title);
-            setAdvanceOnTriage(viewToEdit.settings?.advance_on_triage ?? false);
-            setDisplayType((viewToEdit.settings?.display ?? null));
-            setType(viewToEdit.type);
-            const loadedQuery = viewToEdit.query || DEFAULT_QUERY;
-            const loadedIndexes = viewToEdit.indexes || indexes;
-            const loadedSort = viewToEdit.sort || sort;
-            const loadedSpan = viewToEdit.span || span;
+            setTitle(_view.title ?? '');
+            setAdvanceOnTriage(_view.settings?.advance_on_triage ?? false);
+            setDisplayType(_view.settings?.display ?? 'list');
+            setType(_view.type);
+            const loadedQuery = _view.query || DEFAULT_QUERY;
+            const loadedIndexes = _view.indexes || indexes || ['hit'];
+            const loadedSort = _view.sort || sort;
+            const loadedSpan = _view.span || span;
             setQuery(loadedQuery);
-            if (viewToEdit.indexes) {
+            if (_view.indexes) {
                 setIndexes(loadedIndexes);
             }
-            if (viewToEdit.sort) {
+            if (_view.sort) {
                 setSort(loadedSort);
             }
-            if (viewToEdit.span) {
+            if (_view.span) {
                 setSpan(loadedSpan);
             }
             // Perform search with the loaded values to avoid using stale state
@@ -219,11 +227,11 @@ const ViewComposer = () => {
                                                     if (_type) {
                                                         setType(_type);
                                                     }
-                                                }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }), _jsx(CustomButton, { variant: "outlined", disabled: !title || !type || !query || !response || loading || searching || isSearchDirty, startIcon: loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Save, {}), onClick: onSave, children: t('save') })] }), _jsx(Typography, { sx: theme => ({
+                                                }, children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }), _jsx(CustomButton, { variant: "outlined", disabled: !title || !type || !query || !response || loading || searching || isSearchDirty, startIcon: loading ? _jsx(CircularProgress, { size: 20 }) : _jsx(Save, {}), onClick: onSave, children: t('save') }), _jsx(MembershipManagement, { type: "view", entity: view, onChange: _view => setView(_view) })] }), _jsx(Typography, { sx: theme => ({
                                             color: theme.palette.text.secondary,
                                             fontSize: '0.9em',
                                             fontStyle: 'italic',
                                             mb: 0.5
-                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(Stack, { direction: "row", width: "100%", spacing: 2, alignItems: "flex-start", paddingBottom: 1, children: _jsxs(Stack, { direction: "column", width: "100%", spacing: 1, children: [_jsx(RecordQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(IndexPicker, {}), _jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsx("div", { style: { flex: 1 } }), _jsx(ChipPopper, { label: _jsx(Typography, { variant: "body2", children: t('view.settings') }), deleteIcon: _jsx(Settings, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small' } }, placement: "bottom-end", children: _jsxs(Stack, { direction: "column", spacing: 1, children: [_jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(FlexOne, {}), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [_jsx(Typography, { component: "span", children: t('view.settings.layout') }), _jsx(LayoutToggle, { displayType: displayType, setDisplayType: setDisplayType, size: "small", allowNullValue: true })] })] }) })] })] }) }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "flex-end", justifyContent: "space-between", children: [response && (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })), _jsx(FlexOne, {}), displayType === 'grid' && (_jsx(AddColumnModal, { columns: columns, addColumn: key => isReady && setColumns(uniq([...columns, key])) }))] }), _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: displayType === 'grid' ? (_jsx(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, children: _jsx(RecordTable, { query: query, items: response?.items }) })) : (_jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(record => record.__index === 'hit' ? (_jsx(HitCard, { id: record.howler.id, layout: HitLayout.DENSE }, record.howler.id)) : (_jsx(EventCard, { event: record }, record.howler.id)))] })) })] }) }) }) }));
+                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(Stack, { direction: "row", width: "100%", spacing: 2, alignItems: "flex-start", paddingBottom: 1, children: _jsxs(Stack, { direction: "column", width: "100%", spacing: 1, children: [_jsx(RecordQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(IndexPicker, {}), _jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _jsx("div", { style: { flex: 1 } }), _jsx(ChipPopper, { label: _jsx(Typography, { variant: "body2", children: t('view.settings') }), deleteIcon: _jsx(Settings, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small' } }, placement: "bottom-end", children: _jsxs(Stack, { direction: "column", spacing: 1, children: [_jsxs(Stack, { spacing: 1, direction: "row", alignItems: "center", sx: { flex: '0 !important', minWidth: '300px' }, children: [_jsx(Typography, { component: "span", children: t('view.settings.advance_on_triage') }), _jsx(Tooltip, { title: t('view.settings.advance_on_triage.description'), children: _jsx(HelpOutline, { sx: { fontSize: '16px' } }) }), _jsx(FlexOne, {}), _jsx(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "space-between", children: [_jsx(Typography, { component: "span", children: t('view.settings.layout') }), _jsx(LayoutToggle, { displayType: displayType, setDisplayType: type => type && setDisplayType(type), size: "small", allowNullValue: true })] })] }) })] })] }) }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "flex-end", justifyContent: "space-between", children: [response && (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })), _jsx(FlexOne, {}), displayType === 'grid' && (_jsx(AddColumnModal, { columns: columns, addColumn: key => isReady && setColumns(uniq([...columns, key])) }))] }), _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: displayType === 'grid' ? (_jsx(Stack, { component: Paper, spacing: 1, width: "100%", height: "100%", sx: { overflow: 'auto', flex: 1 }, children: _jsx(RecordTable, { query: query ?? DEFAULT_QUERY, items: response?.items }) })) : (_jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(record => record.__index === 'hit' ? (_jsx(HitCard, { id: record.howler.id, layout: HitLayout.DENSE }, record.howler.id)) : (_jsx(EventCard, { event: record }, record.howler.id)))] })) })] }) }) }) }));
 };
 export default ViewComposer;

package/components/routes/views/Views.d.ts

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

package/components/routes/views/Views.js

@@ -2,28 +2,29 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Clear, Edit, SavedSearch, Star, StarBorder } from '@mui/icons-material';
 import { Autocomplete, Card, Checkbox, IconButton, Skeleton, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material';
+import { useAppUser } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
-import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
+import SearchResponseProvider, { createSearchResponseContext, useSearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
-import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
+import Members from '@cccsaurora/howler-ui/components/elements/membership/Members';
 import { ViewTitle } from '@cccsaurora/howler-ui/components/elements/view/ViewTitle';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import { isNull, omitBy, size } from 'lodash-es';
+import { isNil, omitBy, size } from 'lodash-es';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { Link, useNavigate, useSearchParams } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
 import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
 const FIELDS_TO_SEARCH = ['title', 'query', 'sort', 'type', 'owner'];
+const SearchResponseContext = createSearchResponseContext();
 const ViewsBase = () => {
     const { t } = useTranslation();
     const { user } = useAppUser();
@@ -40,10 +41,10 @@ const ViewsBase = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
+    const { response, request, remove, getSearchRequestData } = useSearchResponseContext(SearchResponseContext);
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
-    const [type, setType] = useState(searchParams.get('type') || null);
+    const [type, setType] = useState(searchParams.get('type'));
     const [hasError, setHasError] = useState(false);
     const [searching, setSearching] = useState(false);
     const [favouritesOnly, setFavouritesOnly] = useState(false);
@@ -62,8 +63,10 @@ const ViewsBase = () => {
             setSearchParams(searchParams, { replace: true });
             const searchTerm = phrase ? `*${sanitizeLuceneQuery(phrase)}*` : '*';
             const phraseQuery = FIELDS_TO_SEARCH.map(_field => `${_field}:${searchTerm}`).join(' OR ');
-            const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${type ?? '*'}${type === 'personal' ? ' OR readonly' : ''})`;
-            const favouritesQuery = favouritesOnly && user.favourite_views.length > 0 ? ` AND view_id:(${user.favourite_views.join(' OR ')})` : '';
+            const typeQuery = `(type:global OR owner:(${user.username} OR none) OR admins:${user.username} OR members:${user.username}) AND type:(${type ?? '*'}${type === 'personal' ? ' OR readonly' : ''})`;
+            const favouritesQuery = favouritesOnly && (user.favourite_views?.length ?? 0) > 0
+                ? ` AND view_id:(${user.favourite_views.join(' OR ')})`
+                : '';
             await request(api.search.view.post, {
                 query: `(${phraseQuery}) AND ${typeQuery}${favouritesQuery}`,
                 rows: pageCount,
@@ -167,7 +170,7 @@ const ViewsBase = () => {
         }
     }, [searchParams, setSearchParams]);
     useEffect(() => {
-        if (response?.total <= offset) {
+        if ((response?.total ?? 0) <= offset) {
             setOffset(0);
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
@@ -179,12 +182,15 @@ const ViewsBase = () => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [offset, favouritesOnly, type]);
-    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' }, size: "small", value: type, exclusive: true, onChange: (__, _type) => onTypeChange(_type), children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.views.search.prompt') }), afterSearch: size(views) > 0 ? (_jsx(Autocomplete, { open: defaultViewOpen, loading: defaultViewLoading, onOpen: onDefaultViewOpen, onClose: () => setDefaultViewOpen(false), options: Object.values(omitBy(views, isNull)), renderOption: ({ key, ...props }, o) => (_createElement("li", { ...props, key: key },
+    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' }, size: "small", value: type, exclusive: true, onChange: (__, _type) => onTypeChange(_type), children: [_jsx(ToggleButton, { value: "personal", "aria-label": "personal", children: t('route.views.manager.personal') }), _jsx(ToggleButton, { value: "global", "aria-label": "global", children: t('route.views.manager.global') })] }) }), aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.views.search.prompt') }), afterSearch: size(views) > 0 ? (_jsx(Autocomplete, { open: defaultViewOpen, loading: defaultViewLoading, onOpen: onDefaultViewOpen, onClose: () => setDefaultViewOpen(false), options: Object.values(omitBy(views, isNil)), renderOption: ({ key, ...props }, o) => (_createElement("li", { ...props, key: key },
                 _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(o.title) }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: o.query }) })] }))), renderInput: params => (_jsx(TextField, { ...params, label: t('route.views.manager.default'), sx: { minWidth: '300px' } })), filterOptions: (_views, { inputValue }) => _views.filter(v => t(v.title).toLowerCase().includes(inputValue.toLowerCase()) ||
-                v.query.toLowerCase().includes(inputValue.toLowerCase())), getOptionLabel: (v) => t(v.title), isOptionEqualToValue: (view, value) => view.view_id === value.view_id, value: views[defaultView] ?? null, onChange: (_, option) => setDefaultView(option?.view_id) })) : (_jsx(Skeleton, { variant: "rounded", width: "300px", height: "initial" })), belowSearch: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Checkbox, { size: "small", disabled: user.favourite_views?.length < 1, checked: favouritesOnly, onChange: (_, checked) => setFavouritesOnly(checked) }), _jsx(Typography, { variant: "body1", sx: theme => ({ color: theme.palette.text.disabled }), children: t('route.views.manager.favourites') })] }), renderer: ({ item }, classRenderer) => (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, transitionProperty: 'border-color', '&:hover': { borderColor: 'primary.main' } }, className: classRenderer(), children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { color: 'inherit', textDecoration: 'none' }, component: Link, to: buildViewUrl(item.item), children: [_jsx(ViewTitle, { ...item.item }), _jsx(FlexOne, {}), ((item.item.owner === user.username && item.item.type !== 'readonly') ||
-                        (item.item.type === 'global' && user.is_admin)) && (_jsx(Tooltip, { title: t('button.edit'), children: _jsx(IconButton, { component: Link, to: `/views/${item.item.view_id}/edit?query=${item.item.query}`, children: _jsx(Edit, {}) }) })), item.item.owner === user.username && item.item.type !== 'readonly' && (_jsx(Tooltip, { title: t('button.delete'), children: _jsx(IconButton, { onClick: event => onDelete(event, item.item.view_id), children: _jsx(Clear, {}) }) })), item.item.type === 'global' && item.item.owner !== user.username && (_jsx(Tooltip, { title: item.item.owner, children: _jsx("div", { children: _jsx(HowlerAvatar, { sx: { width: 24, height: 24, marginRight: '8px !important', marginLeft: '8px !important' }, userId: item.item.owner }) }) })), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { onClick: e => onFavourite(e, item.item.view_id), children: user.favourite_views?.includes(item.item.view_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }, item.item.view_id)), response: response, searchPrompt: "route.views.manager.search", onCreate: () => navigate('/views/create'), createPrompt: "route.views.create", createIcon: _jsx(SavedSearch, { sx: { mr: 1 } }) }));
+                v.query.toLowerCase().includes(inputValue.toLowerCase())), getOptionLabel: (v) => t(v.title), isOptionEqualToValue: (view, value) => view.view_id === value.view_id, value: views[defaultView] ?? null, onChange: (_, option) => setDefaultView(option?.view_id) })) : (_jsx(Skeleton, { variant: "rounded", width: "300px", height: "initial" })), belowSearch: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Checkbox, { size: "small", disabled: (user.favourite_views?.length ?? 0) < 1, checked: favouritesOnly, onChange: (_, checked) => setFavouritesOnly(checked) }), _jsx(Typography, { variant: "body1", sx: theme => ({ color: theme.palette.text.disabled }), children: t('route.views.manager.favourites') })] }), renderer: ({ item }, classRenderer) => (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1, transitionProperty: 'border-color', '&:hover': { borderColor: 'primary.main' } }, className: classRenderer(), children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { color: 'inherit', textDecoration: 'none' }, component: Link, to: buildViewUrl(item.item), children: [_jsx(ViewTitle, { ...item.item }), _jsx(FlexOne, {}), _jsx(Members, { item: item.item }), item.item.type !== 'readonly' &&
+                        (item.item.owner === user.username ||
+                            item.item.admins?.includes(user.username) ||
+                            item.item.members?.includes(user.username) ||
+                            (item.item.type === 'global' && user.is_admin)) && (_jsx(Tooltip, { title: t('button.edit'), children: _jsx(IconButton, { component: Link, to: `/views/${item.item.view_id}/edit?query=${item.item.query}`, children: _jsx(Edit, {}) }) })), item.item.owner === user.username && item.item.type !== 'readonly' && (_jsx(Tooltip, { title: t('button.delete'), children: _jsx(IconButton, { onClick: event => onDelete(event, item.item.view_id), children: _jsx(Clear, {}) }) })), _jsx(Tooltip, { title: t('button.pin'), children: _jsx(IconButton, { onClick: e => onFavourite(e, item.item.view_id), children: user.favourite_views?.includes(item.item.view_id) ? _jsx(Star, {}) : _jsx(StarBorder, {}) }) })] }) }, item.item.view_id)), response: response, searchPrompt: "route.views.manager.search", onCreate: () => navigate('/views/create'), createPrompt: "route.views.create", createIcon: _jsx(SavedSearch, { sx: { mr: 1 } }) }));
 };
 const Views = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "view_id", children: _jsx(ViewsBase, {}) }) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { context: SearchResponseContext, idField: "view_id", children: _jsx(ViewsBase, {}) }) }));
 };
 export default Views;

package/i18n.js

@@ -1,3 +1,5 @@
+import { addTranslations as addA11yTranslations } from '@tui/a11y';
+import { addTranslations as addCoreTranslations } from '@tui/core';
 import { createInstance } from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import helpMainEN from '@cccsaurora/howler-ui/locales/en/help/main.json';
@@ -40,4 +42,6 @@ void i18nInstance
     },
     resources
 });
+addCoreTranslations(i18nInstance);
+addA11yTranslations(i18nInstance);
 export default i18nInstance;

package/locales/en/translation.json

@@ -20,6 +20,7 @@
     "api.user.apikey.removed": "API key removed successfully.",
     "api.user.apikey.updated": "New API key added successfully.",
     "api.user.email.updated": "User's email updated successfully.",
+    "api.user.groups.empty": "No user groups to show.",
     "api.user.name.updated": "User's name updated successfully.",
     "api.user.quota.updated": "API quota updated successfully.",
     "api.user.role.updated": "User's roles updated successfully.",
@@ -318,6 +319,14 @@
     "markdown.error": "An Error Has Occurred.",
     "markdown.json.invalid": "Invalid JSON Provided. Consider using the {{json <data>}} utility to convert objects into JSON strings.",
     "markdown.props.missing": "You are missing keyword arguments for this helper:",
+    "membership.manage": "Manage Membership",
+    "membership.message.error": "There was an error when updating permissions.",
+    "membership.message.success": "Permissions updated.",
+    "membership.message.warning": "No users selected.",
+    "membership.privilege.admins": "Administrator",
+    "membership.privilege.manage": "Manage Privileges",
+    "membership.privilege.members": "Member",
+    "membership.privilege.owner": "Owner",
     "modal.action.description": "Provide a name that allows other users to identify the purpose of this action.",
     "modal.action.empty": "Action Name cannot be empty.",
     "modal.action.label": "Action Name",
@@ -871,6 +880,7 @@
     "rule.interval.thirty.minutes": "Every thirty minutes",
     "rule.interval.three.hours": "Every three hours",
     "save": "Save",
+    "search": "Search",
     "search.fuzzy.no_results": "No results found.",
     "search.fuzzy.placeholder": "Search by IP, domain, hash, email, or keyword...",
     "search.fuzzy.results.cases": "Cases",