@cccsaurora/howler-ui 2.12.0-dev.168

package/components/routes/templates/TemplateViewer.js

@@ -0,0 +1,165 @@
+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 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, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Check, Delete, Remove, 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 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);
+    const [displayFields, setDisplayFields] = useState([]);
+    const [analytics, setAnalytics] = useState([]);
+    const [detections, setDetections] = useState([]);
+    const [analytic, setAnalytic] = useState(params.get('analytic') ?? '');
+    const [detection, setDetection] = useState(params.get('detection') ?? 'ANY');
+    const [type, setType] = useState((params.get('type') ?? 'personal').replace('readonly', 'global'));
+    const [loading, setLoading] = useState(false);
+    const [templateLoading, setTemplateLoading] = useState(false);
+    useEffect(() => {
+        setLoading(true);
+        dispatchApi(api.search.analytic.post({ query: 'analytic_id:*', rows: 1000 }), {
+            logError: false,
+            showError: true,
+            throwError: true
+        })
+            .finally(() => setLoading(false))
+            .then(result => result.items)
+            .then(_analytics => {
+            if (!_analytics.some(_analytic => _analytic.name.toLowerCase() === analytic.toLowerCase())) {
+                setAnalytic('');
+            }
+            setAnalytics(_analytics);
+        });
+        getTemplates(true).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);
+            });
+        }
+    }, [analytic, detection, dispatchApi, params, setParams, type]);
+    useEffect(() => {
+        if (analytic && detection) {
+            const template = (templateList ?? []).find(_template => _template.analytic === analytic &&
+                ((detection === 'ANY' && !_template.detection) || _template.detection === detection) &&
+                _template.type === type);
+            if (template) {
+                setSelectedTemplate(template);
+                setDisplayFields(template.keys);
+            }
+            else {
+                setSelectedTemplate(null);
+                setDisplayFields(DEFAULT_FIELDS);
+            }
+        }
+    }, [analytic, detection, templateList, type]);
+    useEffect(() => {
+        if (analytic) {
+            params.set('analytic', analytic);
+        }
+        else {
+            params.delete('analytic');
+        }
+        if (detection && detection !== 'ANY') {
+            params.set('detection', detection);
+        }
+        else {
+            params.delete('detection');
+        }
+        params.set('type', type);
+        params.sort();
+        setParams(params, {
+            replace: true
+        });
+    }, [analytic, detection, params, setParams, type]);
+    const exampleHit = useMemo(() => {
+        const _hit = hitsData.GET[Object.keys(hitsData.GET)[0]];
+        if (analytic) {
+            _hit.howler.analytic = analytic;
+        }
+        return { ..._hit };
+    }, [analytic]);
+    const onDelete = useCallback(async () => {
+        await dispatchApi(api.template.del(selectedTemplate.template_id), {
+            logError: false,
+            showError: true,
+            throwError: false
+        });
+        setSelectedTemplate(null);
+        setDisplayFields(DEFAULT_FIELDS);
+    }, [dispatchApi, selectedTemplate?.template_id]);
+    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));
+            }
+            finally {
+                setTemplateLoading(false);
+            }
+        }
+    }, [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) => {
+                                    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)) }))] })] }));
+};
+export default TemplateViewer;

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

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

package/components/routes/templates/Templates.js

@@ -0,0 +1,116 @@
+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 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 { 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 = () => {
+    const { t } = useTranslation();
+    const { user } = useAppUser();
+    const navigate = useNavigate();
+    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);
+    const [searching, setSearching] = useState(false);
+    const onSearch = useCallback(async () => {
+        try {
+            setSearching(true);
+            setHasError(false);
+            if (phrase) {
+                searchParams.set('phrase', phrase);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams, { replace: true });
+            // Check for the actual search query
+            const phraseQuery = phrase ? `*:*${phrase}*` : '*:*';
+            // Ensure the template should be visible and/or matches the type we are filtering for
+            const typeQuery = `(type:global OR owner:(${user.username} OR none)) AND type:(${types.join(' ') || '*'})`;
+            setResponse(await dispatchApi(api.search.template.post({
+                query: `${phraseQuery} AND ${typeQuery}`,
+                rows: pageCount,
+                offset
+            })));
+        }
+        catch (e) {
+            setHasError(true);
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [phrase, setSearchParams, searchParams, user.username, types, dispatchApi, pageCount, offset]);
+    // Load the items into list when response changes.
+    // This hook should only trigger when the 'response' changes.
+    useEffect(() => {
+        if (response) {
+            load(response.items.map((item) => ({
+                id: item.template_id,
+                item,
+                selected: false,
+                cursor: false
+            })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [response, load]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    useEffect(() => {
+        onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatchApi, types]);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!searching) {
+            onSearch();
+        }
+        // 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 } }) }));
+};
+const Templates = () => {
+    return (_jsx(TuiListProvider, { children: _jsx(TemplatesBase, {}) }));
+};
+export default Templates;

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const ViewComposer: FC;
+export default ViewComposer;

package/components/routes/views/ViewComposer.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HelpOutline, Save } from '@mui/icons-material';
+import { Alert, Checkbox, CircularProgress, Divider, LinearProgress, 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 { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
+import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
+import FlexPort from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexPort';
+import VSBox from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBox';
+import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxContent';
+import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
+import SearchTotal from '@cccsaurora/howler-ui/components/elements/addons/search/SearchTotal';
+import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+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 { useNavigate, useParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { convertDateToLucene } from '@cccsaurora/howler-ui/utils/utils';
+import ErrorBoundary from '../ErrorBoundary';
+import HitQuery from '../hits/search/HitQuery';
+import HitSort from '../hits/search/shared/HitSort';
+import SearchSpan from '../hits/search/shared/SearchSpan';
+const ViewComposer = () => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { showSuccessMessage, showErrorMessage } = useMySnackbar();
+    const routeParams = useParams();
+    const navigate = useNavigate();
+    const addView = useContextSelector(ViewContext, ctx => ctx.addView);
+    const editView = useContextSelector(ViewContext, ctx => ctx.editView);
+    const views = useContextSelector(ViewContext, ctx => ctx.views);
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const loadHits = useContextSelector(HitContext, ctx => ctx.loadHits);
+    // view state
+    const [title, setTitle] = useState('');
+    const [type, setType] = useState('global');
+    const [advanceOnTriage, setAdvanceOnTriage] = useState(false);
+    const query = useContextSelector(ParameterContext, ctx => ctx.query);
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const sort = useContextSelector(ParameterContext, ctx => ctx.sort);
+    const setSort = useContextSelector(ParameterContext, ctx => ctx.setSort);
+    const span = useContextSelector(ParameterContext, ctx => ctx.span);
+    const setSpan = useContextSelector(ParameterContext, ctx => ctx.setSpan);
+    // Non-view state
+    const [loading, setLoading] = useState(false);
+    const [isSearchDirty, setIsSearchDirty] = useState(false);
+    const [searching, setSearching] = useState(false);
+    const [error, setError] = useState(null);
+    const [response, setResponse] = useState();
+    const onSave = useCallback(async () => {
+        setLoading(true);
+        try {
+            if (!routeParams.id) {
+                const newView = await addView({
+                    title,
+                    type,
+                    query,
+                    sort: sort || null,
+                    span: span || null,
+                    settings: {
+                        advance_on_triage: advanceOnTriage
+                    }
+                });
+                navigate(`/views/${newView.view_id}`);
+            }
+            else {
+                await editView(routeParams.id, title, query, sort || null, span || null, advanceOnTriage);
+            }
+            showSuccessMessage(t(routeParams.id ? 'route.views.update.success' : 'route.views.create.success'));
+        }
+        catch (e) {
+            showErrorMessage(e.message);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [
+        routeParams.id,
+        showSuccessMessage,
+        t,
+        addView,
+        title,
+        type,
+        query,
+        sort,
+        span,
+        advanceOnTriage,
+        navigate,
+        editView,
+        showErrorMessage
+    ]);
+    const search = useCallback(async (_query) => {
+        setQuery(_query);
+        setSearching(true);
+        setError(null);
+        try {
+            const _response = await dispatchApi(api.search.hit.post({
+                rows: pageCount,
+                query: _query,
+                sort,
+                filters: span ? [`event.created:${convertDateToLucene(span)}`] : []
+            }), { showError: false, throwError: true });
+            loadHits(_response.items);
+            setResponse(_response);
+        }
+        catch (e) {
+            setError(e.message);
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [dispatchApi, loadHits, pageCount, setQuery, sort, span]);
+    useEffect(() => {
+        search(query || 'howler.id:*');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // We only run this when ancillary properties (i.e. filters, sorting) change
+    useEffect(() => {
+        if (query) {
+            search(query);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sort, span]);
+    useEffect(() => {
+        if (routeParams.id) {
+            const viewToEdit = views?.find(_view => _view.view_id === routeParams.id);
+            if (!viewToEdit && views?.length > 0) {
+                setError('route.views.missing');
+                return;
+            }
+            else {
+                setError(null);
+            }
+            if (viewToEdit) {
+                setTitle(viewToEdit.title);
+                setAdvanceOnTriage(viewToEdit.settings?.advance_on_triage ?? false);
+                setQuery(viewToEdit.query);
+                if (viewToEdit.sort) {
+                    setSort(viewToEdit.sort);
+                }
+                if (viewToEdit.span) {
+                    setSpan(viewToEdit.span);
+                }
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [routeParams.id, views]);
+    return (_jsx(FlexPort, { children: _jsx(ErrorBoundary, { children: _jsx(PageCenter, { maxWidth: "1500px", textAlign: "left", height: "100%", children: _jsxs(VSBox, { top: 0, children: [_jsx(VSBoxHeader, { pb: 1, children: _jsxs(Stack, { spacing: 1, children: [error && (_jsx(Alert, { variant: "outlined", severity: "error", children: t(error) })), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { label: t('route.views.name'), size: "small", value: title, onChange: e => setTitle(e.target.value), fullWidth: true }), _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr' }, size: "small", exclusive: true, value: type, onChange: (__, _type) => {
+                                                    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 => ({
+                                            color: theme.palette.text.secondary,
+                                            fontSize: '0.9em',
+                                            fontStyle: 'italic',
+                                            mb: 0.5
+                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(HitQuery, { triggerSearch: search, searching: searching, onChange: (_query, isDirty) => setIsSearchDirty(isDirty) }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { '& > :not(.MuiDivider-root)': { flex: 1 } }, divider: _jsx(Divider, { flexItem: true, orientation: "vertical" }), children: [_jsx(HitSort, {}), _jsx(SearchSpan, { omitCustom: true }), _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(Checkbox, { size: "small", checked: advanceOnTriage, onChange: (_event, checked) => setAdvanceOnTriage(checked) })] })] }), response?.total ? (_jsx(SearchTotal, { total: response.total, pageLength: response.items.length, offset: response.offset, sx: theme => ({ color: theme.palette.text.secondary, fontSize: '0.9em', fontStyle: 'italic' }) })) : null, _jsx(LinearProgress, { sx: [!searching && { opacity: 0 }] })] }) }), _jsx(VSBoxContent, { children: _jsxs(Stack, { spacing: 1, children: [!response?.total && _jsx(AppListEmpty, {}), response?.items.map(hit => (_jsx(HitCard, { id: hit.howler.id, layout: HitLayout.DENSE }, hit.howler.id)))] }) })] }) }) }) }));
+};
+export default ViewComposer;

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

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

package/components/routes/views/Views.js

@@ -0,0 +1,155 @@
+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 api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+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 { ViewTitle } from '@cccsaurora/howler-ui/components/elements/view/ViewTitle';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+const FIELDS_TO_SEARCH = ['title', 'query', 'sort', 'type', 'owner'];
+const ViewsBase = () => {
+    const { t } = useTranslation();
+    const { user } = useAppUser();
+    const navigate = useNavigate();
+    const { dispatchApi } = useMyApi();
+    const addFavourite = useContextSelector(ViewContext, ctx => ctx.addFavourite);
+    const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
+    const removeFavourite = useContextSelector(ViewContext, ctx => ctx.removeFavourite);
+    const removeView = useContextSelector(ViewContext, ctx => ctx.removeView);
+    const views = useContextSelector(ViewContext, ctx => ctx.views);
+    const defaultView = useContextSelector(ViewContext, ctx => ctx.defaultView);
+    const setDefaultView = useContextSelector(ViewContext, ctx => ctx.setDefaultView);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { load } = useContext(TuiListMethodContext);
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [phrase, setPhrase] = useState('');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [response, setResponse] = useState(null);
+    const [types, setTypes] = useState([]);
+    const [hasError, setHasError] = useState(false);
+    const [searching, setSearching] = useState(false);
+    const [favouritesOnly, setFavouritesOnly] = useState(false);
+    const onSearch = useCallback(async () => {
+        try {
+            setSearching(true);
+            setHasError(false);
+            if (phrase) {
+                searchParams.set('phrase', phrase);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams, { replace: true });
+            fetchViews(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:(${types.join(' OR ') || '*'}${types.includes('personal') ? ' OR readonly' : ''})`;
+            const favouritesQuery = favouritesOnly && user.favourite_views.length > 0 ? ` AND view_id:(${user.favourite_views.join(' OR ')})` : '';
+            setResponse(await dispatchApi(api.search.view.post({
+                query: `(${phraseQuery}) AND ${typeQuery}${favouritesQuery}`,
+                rows: pageCount,
+                offset
+            })));
+        }
+        catch (e) {
+            setHasError(true);
+        }
+        finally {
+            setSearching(false);
+        }
+    }, [
+        phrase,
+        setSearchParams,
+        searchParams,
+        fetchViews,
+        user.username,
+        user.favourite_views,
+        types,
+        favouritesOnly,
+        dispatchApi,
+        pageCount,
+        offset
+    ]);
+    // Load the items into list when response changes.
+    // This hook should only trigger when the 'response' changes.
+    useEffect(() => {
+        if (response) {
+            load(response.items.map(item => ({
+                id: item.view_id,
+                item,
+                selected: false,
+                cursor: false
+            })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [response, load]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    const onDelete = useCallback(async (event, id) => {
+        event.preventDefault();
+        event.stopPropagation();
+        await dispatchApi(removeView(id));
+        onSearch();
+    }, [dispatchApi, onSearch, removeView]);
+    const onFavourite = useCallback(async (event, id) => {
+        event.preventDefault();
+        if (user.favourite_views?.includes(id)) {
+            await dispatchApi(removeFavourite(id));
+            if (user.favourite_views?.length < 2) {
+                setFavouritesOnly(false);
+            }
+        }
+        else {
+            await dispatchApi(addFavourite(id));
+        }
+    }, [addFavourite, dispatchApi, removeFavourite, user.favourite_views]);
+    useEffect(() => {
+        onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatchApi, types]);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!searching) {
+            onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [offset, favouritesOnly]);
+    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: types, onChange: (__, _types) => {
+                    if (_types) {
+                        setTypes(_types.length < 2 ? _types : []);
+                    }
+                }, 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: views?.length > 0 ? (_jsx(Autocomplete, { options: views, renderOption: (props, o) => (_jsx("li", { ...props, children: _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?.find(v => v.view_id === 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: `/views/${item.item.view_id}`, 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 } }) }));
+};
+const Views = () => {
+    return (_jsx(TuiListProvider, { children: _jsx(ViewsBase, {}) }));
+};
+export default Views;

package/i18n.d.ts

@@ -0,0 +1,3 @@
+import { type i18n } from 'i18next';
+declare const i18nInstance: i18n;
+export default i18nInstance;