@cccsaurora/howler-ui 2.19.0-dev.999 → 2.19.0

package/components/routes/overviews/Overviews.js

@@ -3,6 +3,7 @@ import { Article } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import SearchResponseProvider, { SearchResponseContext } 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';
@@ -25,9 +26,9 @@ const OverviewsBase = () => {
     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 [hasError, setHasError] = useState(false);
     const [loading, setLoading] = useState(false);
+    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     const onSearch = useCallback(async () => {
         try {
             setLoading(true);
@@ -42,19 +43,19 @@ const OverviewsBase = () => {
             // Check for the actual search query
             const query = phrase ? `*:*${phrase}*` : '*:*';
             // Ensure the overview should be visible and/or matches the type we are filtering for
-            setResponse(await dispatchApi(api.search.overview.post({
+            await request(api.search.overview.post, {
                 query,
                 rows: pageCount,
                 offset
-            })));
+            });
         }
-        catch (e) {
+        catch {
             setHasError(true);
         }
         finally {
             setLoading(false);
         }
-    }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+    }, [phrase, setSearchParams, searchParams, request, pageCount, offset]);
     // Load the items into list when response changes.
     // This hook should only trigger when the 'response' changes.
     useEffect(() => {
@@ -70,18 +71,19 @@ const OverviewsBase = () => {
     }, [response, load]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
-            searchParams.set('offset', _offset.toString());
+            const modifiedRequest = getSearchRequestData({ offset: _offset });
+            searchParams.set('offset', modifiedRequest.offset.toString());
             setSearchParams(searchParams, { replace: true });
-            setOffset(_offset);
+            setOffset(modifiedRequest.offset);
         }
-    }, [offset, searchParams, setSearchParams]);
+    }, [offset, searchParams, setSearchParams, getSearchRequestData]);
     const onDelete = useCallback((e, id) => {
         e.preventDefault();
         e.stopPropagation();
         withConfirmDeleteModal(async () => {
             try {
-                await dispatchApi(api.overview.del(id), { throwError: false, showError: true });
-                await onSearch();
+                await dispatchApi(api.overview.del(id), { throwError: true, showError: true });
+                remove(id);
                 showSuccessMessage(t('route.overviews.manager.delete.success'));
             }
             catch (_err) {
@@ -89,9 +91,9 @@ const OverviewsBase = () => {
                 console.warn(_err);
             }
         });
-    }, [dispatchApi, onSearch, withConfirmDeleteModal, showSuccessMessage, t]);
+    }, [dispatchApi, remove, withConfirmDeleteModal, showSuccessMessage, t]);
     useEffect(() => {
-        onSearch();
+        void onSearch();
         if (!searchParams.has('offset')) {
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
@@ -107,7 +109,7 @@ const OverviewsBase = () => {
     }, [offset, response?.total, searchParams, setSearchParams]);
     useEffect(() => {
         if (!loading) {
-            onSearch();
+            void onSearch();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [offset]);
@@ -115,6 +117,6 @@ const OverviewsBase = () => {
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.overviews.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/overviews/view?analytic=${item.item.analytic}${item.item.detection ? '&detection=' + item.item.detection : ''}`), onCreate: () => navigate('/overviews/view'), createPrompt: "route.overviews.create", searchPrompt: "route.overviews.manager.search", createIcon: _jsx(Article, { sx: { mr: 1 } }) }));
 };
 const Overviews = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(OverviewsBase, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "overview_id", children: _jsx(OverviewsBase, {}) }) }));
 };
 export default Overviews;

package/components/routes/overviews/markdownExtendedTokenProvider.js

@@ -33,8 +33,8 @@ export const language = {
     defaultToken: '',
     tokenPostfix: '.md',
     // escape codes
-    control: /[\\`*_\[\]{}()#+\-\.!]/,
-    noncontrol: /[^\\`*_\[\]{}()#+\-\.!]/,
+    control: /[\\`*_[\]{}()#+\-.!]/,
+    noncontrol: /[^\\`*_[\]{}()#+\-.!]/,
     escapes: /\\(?:@control)/,
     // escape codes for javascript/CSS strings
     jsescapes: /\\(?:[btnfr\\"']|[0-7][0-7]?|[0-3][0-7]{2})/,
@@ -70,19 +70,19 @@ export const language = {
             // headers (with #)
             [/^(\s{0,3})(#+)((?:[^\\#]|@escapes)+)((?:#+)?)/, ['white', 'keyword', 'keyword', 'keyword']],
             // headers (with =)
-            [/^\s*(=+|\-+)\s*$/, 'keyword'],
+            [/^\s*(=+|-+)\s*$/, 'keyword'],
             // headers (with ***)
             [/^\s*((\*[ ]?)+)\s*$/, 'meta.separator'],
             // quote
             [/^\s*>+/, 'comment'],
             // list (starting with * or number)
-            [/^\s*([\*\-+:]|\d+\.)\s/, 'keyword'],
+            [/^\s*([*\-+:]|\d+\.)\s/, 'keyword'],
             // code block (4 spaces indent)
             [/^(\t|[ ]{4})[^ ].*$/, 'string'],
             // code block (3 tilde)
-            [/^\s*~~~\s*((?:\w|[\/\-#])+)?\s*$/, { token: 'string', next: '@codeblock' }],
+            [/^\s*~~~\s*((?:\w|[/\-#])+)?\s*$/, { token: 'string', next: '@codeblock' }],
             // github style code blocks (with backticks and language)
-            [/^\s*```\s*((?:\w|[\/\-#])+).*$/, { token: 'string', next: '@codeblockgh', nextEmbedded: '$1' }],
+            [/^\s*```\s*((?:\w|[/\-#])+).*$/, { token: 'string', next: '@codeblockgh', nextEmbedded: '$1' }],
             // github style code blocks (with backticks but no language)
             [/^\s*```\s*$/, { token: 'string', next: '@codeblock' }],
             // CCCS MODIFICATION
@@ -94,7 +94,7 @@ export const language = {
         handlebars: [
             [/"[^"]+"/, 'string'],
             [/[()]/, 'handlebars'],
-            [/[\w\d\.]+/, 'variable'],
+            [/[\w\d.]+/, 'variable'],
             [
                 /[#/\w]+/,
                 {
@@ -109,13 +109,13 @@ export const language = {
         // CCCS MODIFICATION END
         table_header: [
             { include: '@table_common' },
-            [/[^\|]+/, 'keyword.table.header'] // table header
+            [/[^|]+/, 'keyword.table.header'] // table header
         ],
         table_body: [{ include: '@table_common' }, { include: '@linecontent' }],
         table_common: [
-            [/\s*[\-:]+\s*/, { token: 'keyword', switchTo: 'table_body' }], // header-divider
+            [/\s*[-:]+\s*/, { token: 'keyword', switchTo: 'table_body' }], // header-divider
             [/^\s*\|/, 'keyword.table.left'], // opening |
-            [/^\s*[^\|]/, '@rematch', '@pop'], // exiting
+            [/^\s*[^|]/, '@rematch', '@pop'], // exiting
             [/^\s*$/, '@rematch', '@pop'], // exiting
             [
                 /\|/,
@@ -149,7 +149,7 @@ export const language = {
             [/`/, { token: 'variable', next: '@codecontent' }],
             // links
             [/\{+[^}]+\}+/, 'string.target'],
-            [/(!?\[)((?:[^\]\\]|@escapes)*)(\]\([^\)]+\))/, ['string.link', '', 'string.link']],
+            [/(!?\[)((?:[^\]\\]|@escapes)*)(\]\([^)]+\))/, ['string.link', '', 'string.link']],
             [/(!?\[)((?:[^\]\\]|@escapes)*)(\])/, 'string.link'],
             // or html
             { include: 'html' }
@@ -169,7 +169,7 @@ export const language = {
             // html tags
             [/<(\w+)\/>/, 'tag'],
             [
-                /<(\w+)(\-|\w)*/,
+                /<(\w+)(-|\w)*/,
                 {
                     cases: {
                         '@empty': { token: 'tag', next: '@tag.$1' },
@@ -177,14 +177,14 @@ export const language = {
                     }
                 }
             ],
-            [/<\/(\w+)(\-|\w)*\s*>/, { token: 'tag' }],
+            [/<\/(\w+)(-|\w)*\s*>/, { token: 'tag' }],
             [/<!--/, 'comment', '@comment']
         ],
         comment: [
-            [/[^<\-]+/, 'comment.content'],
+            [/[^<-]+/, 'comment.content'],
             [/-->/, 'comment', '@pop'],
             [/<!--/, 'comment.content.invalid'],
-            [/[<\-]/, 'comment.content']
+            [/[<-]/, 'comment.content']
         ],
         // Almost full HTML tag matching, complete with embedded scripts & styles
         tag: [

package/components/routes/overviews/markdownExtendedTokenProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,50 @@
+/// <reference types="vitest" />
+import { describe, expect, it } from 'vitest';
+import { conf, language } from './markdownExtendedTokenProvider';
+describe('markdownExtendedTokenProvider', () => {
+    describe('conf', () => {
+        it('exports a language configuration object', () => {
+            expect(conf).toBeDefined();
+            expect(typeof conf).toBe('object');
+        });
+        it('defines block comment markers', () => {
+            expect(conf.comments?.blockComment).toEqual(['<!--', '-->']);
+        });
+        it('defines bracket pairs', () => {
+            expect(Array.isArray(conf.brackets)).toBe(true);
+            expect(conf.brackets.length).toBeGreaterThan(0);
+        });
+        it('defines auto-closing pairs', () => {
+            expect(Array.isArray(conf.autoClosingPairs)).toBe(true);
+        });
+        it('defines folding markers', () => {
+            expect(conf.folding?.markers?.start).toBeInstanceOf(RegExp);
+            expect(conf.folding?.markers?.end).toBeInstanceOf(RegExp);
+        });
+    });
+    describe('language', () => {
+        it('exports a monarch language definition', () => {
+            expect(language).toBeDefined();
+            expect(typeof language).toBe('object');
+        });
+        it('has a root tokenizer state', () => {
+            expect(language.tokenizer).toBeDefined();
+            expect(Array.isArray(language.tokenizer.root)).toBe(true);
+        });
+        it('uses an empty string as the default token', () => {
+            expect(language.defaultToken).toBe('');
+        });
+        it('includes Handlebars operators in the language definition', () => {
+            const operators = language.handlebars_operators;
+            expect(Array.isArray(operators)).toBe(true);
+            expect(operators).toContain('#if');
+            expect(operators).toContain('/if');
+        });
+        it('includes a handlebars tokenizer state', () => {
+            expect(language.tokenizer).toHaveProperty('handlebars');
+        });
+        it('includes an html tokenizer state', () => {
+            expect(language.tokenizer).toHaveProperty('html');
+        });
+    });
+});

package/components/routes/settings/ProfileSection.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Add, Check, ChevronRight, Clear } from '@mui/icons-material';
 import { Chip, CircularProgress, Grid, TableCell, TableRow, Typography } from '@mui/material';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
@@ -17,7 +17,7 @@ const ProfileSection = ({ user, editName, addRole, removeRole, viewGroups }) =>
     const [loadingGroups, setLoadingGroups] = useState(false);
     const wrapChange = useCallback(async (r, fn) => {
         const delayedLoad = delay(250);
-        delayedLoad.then(() => {
+        void delayedLoad.then(() => {
             setLoading({
                 ...loading,
                 [r]: true

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

@@ -1,9 +1,10 @@
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-declare const _default: import("react").MemoExoticComponent<({ hit, fields, setFields, onRemove, onAdd }: {
+declare const TemplateEditor: ({ hit, fields, setFields, onRemove, onAdd }: {
     hit: Hit;
     fields: string[];
     setFields: (displayFields: string[]) => void;
     onRemove: (field: string) => void;
     onAdd: (field: string) => void;
-}) => import("react/jsx-runtime").JSX.Element>;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TemplateEditor>;
 export default _default;

package/components/routes/templates/TemplateEditor.js

@@ -30,7 +30,7 @@ const TemplateEditor = ({ hit, fields, setFields, onRemove, onAdd }) => {
         }
     }, [tryAddField]);
     useEffect(() => {
-        getHitFields().then(suggestionFields => setSuggestions(suggestionFields.map(f => f.key)));
+        void getHitFields().then(suggestionFields => setSuggestions(suggestionFields.map(f => f.key)));
     }, [getHitFields]);
     const handleDragEnd = useCallback((event) => {
         const { active, over } = event;

package/components/routes/templates/TemplateViewer.js

@@ -10,6 +10,7 @@ import AppInfoPanel from '@cccsaurora/howler-ui/commons/components/display/AppIn
 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';
@@ -19,6 +20,7 @@ const TemplateViewer = () => {
     const [params, setParams] = useSearchParams();
     const { dispatchApi } = useMyApi();
     const { withConfirmDeleteModal } = useContext(ModalContext);
+    const { showSuccessMessage } = useMySnackbar();
     const [templateList, setTemplateList] = useState([]);
     const [selectedTemplate, setSelectedTemplate] = useState(null);
     const [sessionTemplateList, setSessionTemplateList] = useState([]);
@@ -32,7 +34,7 @@ const TemplateViewer = () => {
     const [templateLoading, setTemplateLoading] = useState(false);
     useEffect(() => {
         setLoading(true);
-        dispatchApi(api.search.analytic.post({ query: 'analytic_id:*', rows: 1000 }), {
+        void dispatchApi(api.search.analytic.post({ query: 'analytic_id:*', rows: 1000 }), {
             logError: false,
             showError: true,
             throwError: true
@@ -45,7 +47,7 @@ const TemplateViewer = () => {
             }
             setAnalytics(_analytics);
         });
-        dispatchApi(api.template.get()).then(setTemplateList);
+        void dispatchApi(api.template.get()).then(setTemplateList);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [analytic, dispatchApi]);
     useEffect(() => {
@@ -53,7 +55,7 @@ const TemplateViewer = () => {
             return;
         }
         setLoading(true);
-        dispatchApi(api.search.grouped.hit.post('howler.detection', {
+        void dispatchApi(api.search.grouped.hit.post('howler.detection', {
             limit: 0,
             query: `howler.analytic:"${sanitizeLuceneQuery(analytic)}"`
         }), {
@@ -122,7 +124,7 @@ const TemplateViewer = () => {
             await dispatchApi(api.template.del(selectedTemplate.template_id), {
                 logError: false,
                 showError: true,
-                throwError: false
+                throwError: true
             });
             setSessionTemplateList(l => l.filter(v => v.analytic != selectedTemplate.analytic ||
                 v.detection != selectedTemplate.detection ||
@@ -130,6 +132,7 @@ const TemplateViewer = () => {
             setTemplateList(l => l.filter(v => v.analytic != selectedTemplate.analytic ||
                 v.detection != selectedTemplate.detection ||
                 v.type != selectedTemplate.type));
+            showSuccessMessage(t('route.templates.manager.delete.success'));
         });
     }, [
         dispatchApi,
@@ -137,7 +140,9 @@ const TemplateViewer = () => {
         selectedTemplate?.detection,
         selectedTemplate?.template_id,
         selectedTemplate?.type,
-        withConfirmDeleteModal
+        withConfirmDeleteModal,
+        showSuccessMessage,
+        t
     ]);
     const onSave = useCallback(async () => {
         if (analytic && detection) {

package/components/routes/templates/Templates.js

@@ -4,11 +4,13 @@ import { Stack, ToggleButton, ToggleButtonGroup, Typography } from '@mui/materia
 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 { 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 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';
@@ -20,12 +22,13 @@ const TemplatesBase = () => {
     const navigate = useNavigate();
     const { dispatchApi } = useMyApi();
     const [searchParams, setSearchParams] = useSearchParams();
-    const { load, remove } = useContext(TuiListMethodContext);
+    const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { showSuccessMessage } = useMySnackbar();
     const { analytics } = useContext(AnalyticContext);
+    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     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);
@@ -44,19 +47,19 @@ const TemplatesBase = () => {
             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({
+            await request(api.search.template.post, {
                 query: `${phraseQuery} AND ${typeQuery}`,
                 rows: pageCount,
                 offset
-            })));
+            });
         }
-        catch (e) {
+        catch {
             setHasError(true);
         }
         finally {
             setSearching(false);
         }
-    }, [phrase, setSearchParams, searchParams, user.username, types, dispatchApi, pageCount, offset]);
+    }, [phrase, setSearchParams, searchParams, user.username, types, request, pageCount, offset]);
     // Load the items into list when response changes.
     // This hook should only trigger when the 'response' changes.
     // or if the analytic list changes to refresh the disabled state
@@ -77,13 +80,14 @@ const TemplatesBase = () => {
     }, [response, load, analytics]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
-            searchParams.set('offset', _offset.toString());
+            const modifiedRequest = getSearchRequestData({ offset: _offset });
+            searchParams.set('offset', modifiedRequest.offset.toString());
             setSearchParams(searchParams, { replace: true });
-            setOffset(_offset);
+            setOffset(modifiedRequest.offset);
         }
-    }, [offset, searchParams, setSearchParams]);
+    }, [offset, searchParams, setSearchParams, getSearchRequestData]);
     useEffect(() => {
-        onSearch();
+        void onSearch();
         if (!searchParams.has('offset')) {
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
@@ -99,7 +103,7 @@ const TemplatesBase = () => {
     }, [offset, response?.total, searchParams, setSearchParams]);
     useEffect(() => {
         if (!searching) {
-            onSearch();
+            void onSearch();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [offset]);
@@ -107,10 +111,11 @@ const TemplatesBase = () => {
         await dispatchApi(api.template.del(templateId), {
             logError: false,
             showError: true,
-            throwError: false
+            throwError: true
         });
         remove(templateId);
-    }, [dispatchApi, remove]);
+        showSuccessMessage(t('route.templates.manager.delete.success'));
+    }, [dispatchApi, remove, showSuccessMessage, t]);
     const renderer = useCallback((item, error, className) => (_jsx(TemplateCard, { template: item, error: error, onRemove: removeTemplate, className: className })), [removeTemplate]);
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: searching, searchFilters: _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: _jsxs(ToggleButtonGroup, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr', alignSelf: 'start' }, size: "small", value: types, onChange: (__, _types) => {
                     if (_types) {
@@ -121,6 +126,6 @@ const TemplatesBase = () => {
         }, 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, {}) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "template_id", children: _jsx(TemplatesBase, {}) }) }));
 };
 export default Templates;