@cccsaurora/howler-ui 3.1.0-dev.1454 → 3.1.0-dev.1463

package/components/elements/display/Modal.js

@@ -16,7 +16,7 @@ const Modal = () => {
                 left: '50%',
                 maxWidth: options.maxWidth || '1200px',
                 maxHeight: options.maxHeight || '400px',
-                height: has(options, 'height') ? options.height : '100%',
+                height: has(options, 'height') ? options.height : 'auto',
                 transform: 'translate(-50%, -50%)',
                 backgroundColor: 'background.paper',
                 borderRadius: theme.shape.borderRadius,

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

@@ -1,6 +1,6 @@
-import type { FC } from 'react';
+import type { FC, MouseEventHandler } from 'react';
 declare const ConfirmDeleteModal: FC<{
-    onConfirm: () => void;
+    onConfirm: MouseEventHandler<HTMLButtonElement> | (() => void);
     title?: string;
     description?: string;
     preferDelete?: boolean;

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

@@ -6,8 +6,8 @@ import { useTranslation } from 'react-i18next';
 const ConfirmDeleteModal = ({ onConfirm, title, description, preferDelete, preferCancel }) => {
     const { t } = useTranslation();
     const { close } = useContext(ModalContext);
-    const handleConfirm = useCallback(() => {
-        onConfirm();
+    const handleConfirm = useCallback((e) => {
+        onConfirm(e);
         close();
     }, [close, onConfirm]);
     const modalTitle = title ?? t('modal.confirm.delete.title');

package/components/routes/overviews/OverviewCard.d.ts

@@ -1,8 +1,9 @@
 import type { Overview } from '@cccsaurora/howler-ui/models/entities/generated/Overview';
-import type { FC } from 'react';
+import { type FC } from 'react';
 declare const OverviewCard: FC<{
     overview: Overview;
     className?: string;
-    onDelete?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void;
+    error?: boolean;
+    onRemove?: (id: string) => Promise<void>;
 }>;
 export default OverviewCard;

package/components/routes/overviews/OverviewCard.js

@@ -1,16 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Delete } from '@mui/icons-material';
-import { Card, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { Delete, ReportProblem } from '@mui/icons-material';
+import { Button, Card, IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
+import ConfirmDeleteModal from '@cccsaurora/howler-ui/components/elements/display/modals/ConfirmDeleteModal';
+import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-const OverviewCard = ({ overview, className, onDelete }) => {
+const OverviewCard = ({ overview, error, className, onRemove }) => {
     const { t } = useTranslation();
+    const { showModal, withConfirmDeleteModal } = useContext(ModalContext);
+    const onDelete = useCallback((e, id) => {
+        e.preventDefault();
+        e.stopPropagation();
+        withConfirmDeleteModal(async () => {
+            await onRemove?.(id);
+        });
+    }, [onRemove, withConfirmDeleteModal]);
     return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(overview.analytic), " - ", t(overview.detection ?? 'all')] }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: _jsx("code", { children: _jsx("pre", { children: overview.content
                                         .split('\n')
                                         .filter(line => !!line)
                                         .slice(0, 3)
                                         .map(content => content.replace(/(.{,64}).+/, '$1'))
-                                        .join('\n') }) }) })] }), _jsx(FlexOne, {}), _jsx(HowlerAvatar, { sx: { height: '24px', width: '24px' }, userId: overview.owner }), onDelete && (_jsx(Tooltip, { title: t('route.overviews.manager.delete'), children: _jsx(IconButton, { onClick: e => onDelete(e, overview.overview_id), children: _jsx(Delete, {}) }) }))] }) }, overview.overview_id));
+                                        .join('\n') }) }) })] }), _jsx(FlexOne, {}), _jsx(HowlerAvatar, { sx: { height: '24px', width: '24px' }, userId: overview.owner }), onRemove && (_jsx(Tooltip, { title: t('route.overviews.manager.delete'), children: _jsx(IconButton, { onClick: e => onDelete?.(e, overview.overview_id), children: _jsx(Delete, {}) }) })), error && (_jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(Stack, { children: _jsx(Tooltip, { title: t('error.invalid_detection.action'), children: _jsx(Button, { startIcon: _jsx(ReportProblem, {}), color: "warning", onClick: () => showModal(_jsx(ConfirmDeleteModal, { onConfirm: () => onRemove?.(overview.overview_id), title: t('route.overviews.manager.error.modal.title'), description: t('route.overviews.manager.error.modal.description'), preferDelete: true })), children: t('error.invalid_detection.message') }) }) }) }))] }) }, overview.overview_id));
 };
 export default OverviewCard;

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

@@ -1,7 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vitest" />
 import { render, screen } from '@testing-library/react';
 import userEvent, {} from '@testing-library/user-event';
+import ModalProvider from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import Modal from '@cccsaurora/howler-ui/components/elements/display/Modal';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -12,7 +14,7 @@ vi.mock('components/elements/display/HowlerAvatar', () => ({
 vi.mock('components/elements/addons/layout/FlexOne', () => ({
     default: () => _jsx("div", { id: "flex-one" })
 }));
-const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: children }));
+const Wrapper = ({ children }) => (_jsx(I18nextProvider, { i18n: i18n, children: _jsxs(ModalProvider, { children: [children, _jsx(Modal, {})] }) }));
 describe('OverviewCard', () => {
     let user;
     beforeEach(() => {
@@ -87,10 +89,12 @@ describe('OverviewCard', () => {
             content: 'content',
             owner: 'testuser'
         };
-        render(_jsx(OverviewCard, { overview: overview, onDelete: mockOnDelete }), { wrapper: Wrapper });
+        render(_jsx(OverviewCard, { overview: overview, onRemove: mockOnDelete }), { wrapper: Wrapper });
         const deleteButton = document.querySelector('[data-testid="DeleteIcon"]').closest('button');
         await user.click(deleteButton);
-        expect(mockOnDelete).toHaveBeenCalledWith(expect.anything(), 'ov-1');
+        const confirmButton = screen.getByRole('button', { name: /delete/i });
+        await user.click(confirmButton);
+        expect(mockOnDelete).toHaveBeenCalledWith('ov-1');
     });
     it('should apply custom className', () => {
         const overview = {

package/components/routes/overviews/Overviews.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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 { 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';
@@ -20,7 +20,6 @@ const OverviewsBase = () => {
     const navigate = useNavigate();
     const { dispatchApi } = useMyApi();
     const { showSuccessMessage } = useMySnackbar();
-    const { withConfirmDeleteModal } = useContext(ModalContext);
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
@@ -28,6 +27,7 @@ const OverviewsBase = () => {
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
     const [hasError, setHasError] = useState(false);
     const [loading, setLoading] = useState(false);
+    const { analytics } = useContext(AnalyticContext);
     const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
     const onSearch = useCallback(async () => {
         try {
@@ -58,17 +58,22 @@ const OverviewsBase = () => {
     }, [phrase, setSearchParams, searchParams, 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
     useEffect(() => {
         if (response) {
             load(response.items.map((item) => ({
                 id: item.overview_id,
                 item,
                 selected: false,
-                cursor: false
+                cursor: false,
+                disabled: item.detection &&
+                    !analytics
+                        .find(v => v.name === item.analytic)
+                        ?.detections?.map((s) => s.toLowerCase())
+                        ?.includes(item.detection?.toLowerCase())
             })));
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [response, load]);
+    }, [response, load, analytics]);
     const onPageChange = useCallback((_offset) => {
         if (_offset !== offset) {
             const modifiedRequest = getSearchRequestData({ offset: _offset });
@@ -77,21 +82,17 @@ const OverviewsBase = () => {
             setOffset(modifiedRequest.offset);
         }
     }, [offset, searchParams, setSearchParams, getSearchRequestData]);
-    const onDelete = useCallback((e, id) => {
-        e.preventDefault();
-        e.stopPropagation();
-        withConfirmDeleteModal(async () => {
-            try {
-                await dispatchApi(api.overview.del(id), { throwError: true, showError: true });
-                remove(id);
-                showSuccessMessage(t('route.overviews.manager.delete.success'));
-            }
-            catch (_err) {
-                // eslint-disable-next-line no-console
-                console.warn(_err);
-            }
-        });
-    }, [dispatchApi, remove, withConfirmDeleteModal, showSuccessMessage, t]);
+    const removeOverview = useCallback(async (overviewId) => {
+        try {
+            await dispatchApi(api.overview.del(overviewId), { throwError: true, showError: true });
+            remove(overviewId);
+            showSuccessMessage(t('route.overviews.manager.delete.success'));
+        }
+        catch (_err) {
+            // eslint-disable-next-line no-console
+            console.warn(_err);
+        }
+    }, [dispatchApi, remove, showSuccessMessage, t]);
     useEffect(() => {
         void onSearch();
         if (!searchParams.has('offset')) {
@@ -113,8 +114,8 @@ const OverviewsBase = () => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [offset]);
-    const renderer = useCallback((item, className) => _jsx(OverviewCard, { overview: item, className: className, onDelete: onDelete }), [onDelete]);
-    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 renderer = useCallback((item, error, className) => (_jsx(OverviewCard, { overview: item, error: error, className: className, onRemove: removeOverview })), [removeOverview]);
+    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, !!item.disabled, 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(SearchResponseProvider, { idField: "overview_id", children: _jsx(OverviewsBase, {}) }) }));

package/components/routes/templates/TemplateCard.js

@@ -12,6 +12,6 @@ const TemplateCard = ({ template, onRemove, error, className }) => {
                         readonly: _jsx(Lock, {}),
                         global: _jsx(Language, {}),
                         personal: _jsx(Person, {})
-                    }[template.type] }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(template.analytic), " - ", t(template.detection ?? 'all')] }), template.keys.map(key => (_jsx(Typography, { variant: "caption", sx: { ml: 1 }, children: _jsx("code", { children: key }) }, template.template_id + key)))] }), error && (_jsx(Stack, { direction: "row", justifyContent: "end", width: "100%", children: _jsx(Stack, { children: _jsx(Tooltip, { title: t('route.templates.manager.error.action'), children: _jsx(Button, { startIcon: _jsx(ReportProblem, {}), color: "warning", onClick: () => showModal(_jsx(ConfirmDeleteModal, { onConfirm: () => onRemove?.(template.template_id), title: t('route.templates.manager.error.modal.title'), description: t('route.templates.manager.error.modal.description'), preferDelete: true })), children: t('route.templates.manager.error.message') }) }) }) }))] }) }, template.template_id));
+                    }[template.type] }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(template.analytic), " - ", t(template.detection ?? 'all')] }), template.keys.map(key => (_jsx(Typography, { variant: "caption", sx: { ml: 1 }, children: _jsx("code", { children: key }) }, template.template_id + key)))] }), error && (_jsx(Stack, { direction: "row", justifyContent: "end", width: "100%", children: _jsx(Stack, { children: _jsx(Tooltip, { title: t('error.invalid_detection.action'), children: _jsx(Button, { startIcon: _jsx(ReportProblem, {}), color: "warning", onClick: () => showModal(_jsx(ConfirmDeleteModal, { onConfirm: () => onRemove?.(template.template_id), title: t('route.templates.manager.error.modal.title'), description: t('route.templates.manager.error.modal.description'), preferDelete: true })), children: t('error.invalid_detection.message') }) }) }) }))] }) }, template.template_id));
 };
 export default TemplateCard;

package/locales/en/translation.json

@@ -112,6 +112,8 @@
     "duplicates.omitted": "Some duplicate entries have been omitted.",
     "edit": "Edit",
     "enabled": "Enabled",
+    "error.invalid_detection.action": "Click to open quick fix options",
+    "error.invalid_detection.message": "Invalid Detection",
     "event.module": "Event Module",
     "event.open": "Open Event",
     "event.type": "Event Type",
@@ -806,6 +808,8 @@
     "route.overviews.detection": "Choose Detection",
     "route.overviews.manager.delete": "Delete Overview",
     "route.overviews.manager.delete.success": "Overview removed.",
+    "route.overviews.manager.error.modal.description": "The overview fields are read only and will not be used. Do you want to remove the template?",
+    "route.overviews.manager.error.modal.title": "Overview detection no longer exists",
     "route.overviews.manager.search": "Search Overviews",
     "route.overviews.prompt": "Activate autocomplete using [ctrl + space].",
     "route.overviews.search.prompt": "Search by title, content, analytic or detection.",
@@ -824,8 +828,6 @@
     "route.templates.detection": "Choose Detection",
     "route.templates.global": "Global",
     "route.templates.manager.delete.success": "Template removed.",
-    "route.templates.manager.error.action": "Click to open quick fix options",
-    "route.templates.manager.error.message": "Invalid Detection",
     "route.templates.manager.error.modal.description": "The template fields are read only and will not be used. Do you want to remove the template?",
     "route.templates.manager.error.modal.title": "Template detection no longer exists",
     "route.templates.manager.global": "Global",

package/locales/fr/translation.json

@@ -112,6 +112,8 @@
     "duplicates.omitted": "Certains doublons ont été omis.",
     "edit": "Modifier",
     "enabled": "Activé",
+    "error.invalid_detection.action": "Cliquez ici pour afficher les options de correction rapide",
+    "error.invalid_detection.message": "Détection non valide",
     "event.module": "Module d'événement",
     "event.open": "Ouvrir événement",
     "event.type": "Type d'événement",
@@ -806,6 +808,8 @@
     "route.overviews.detection": "Choisir une détection",
     "route.overviews.manager.delete": "Supprimer la vue d'ensemble",
     "route.overviews.manager.delete.success": "Vue d'ensemble supprimée.",
+    "route.overviews.manager.error.modal.description": "Les clés de la vue d'ensemble sont en lecture seule et ne seront pas utilisées. Voulez-vous supprimer cette vue d'ensemble ?",
+    "route.overviews.manager.error.modal.title": "La détection de la vue d'ensemble n'existe plus",
     "route.overviews.manager.search": "Rechercher les vues d'ensemble",
     "route.overviews.prompt": "Activer l'autocomplétion en utilisant [ctrl + espace].",
     "route.overviews.search.prompt": "Recherche par titre, contenu, clé d'analyse ou de détection.",
@@ -824,9 +828,7 @@
     "route.templates.detection": "Choisir une détection",
     "route.templates.global": "Global",
     "route.templates.manager.delete.success": "Modèle supprimé.",
-    "route.templates.manager.error.action": "Cliquez ici pour afficher les options de correction rapide",
-    "route.templates.manager.error.message": "Détection non valide",
-    "route.templates.manager.error.modal.description": "Les clés du modèle sont en lecture seule et ne seront pas utilisées. Voulez-vous supprimer le modèle ?",
+    "route.templates.manager.error.modal.description": "Les clés du modèle sont en lecture seule et ne seront pas utilisées. Voulez-vous supprimer ce modèle ?",
     "route.templates.manager.error.modal.title": "La détection du modèle n'existe plus",
     "route.templates.manager.global": "Global",
     "route.templates.manager.open": "Ouvrir la vue",

package/package.json

@@ -93,7 +93,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1454",
+  "version": "3.1.0-dev.1463",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",