@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

package/components/elements/view/ViewTitle.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDownward, ArrowUpward, Language, Lock, Person } from '@mui/icons-material';
+import { Chip, Stack, Tooltip, Typography } from '@mui/material';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
+export const ViewTitle = ({ title, type, query, sort, span }) => {
+    const { t } = useTranslation();
+    const spanLabel = useMemo(() => {
+        if (!span) {
+            return '';
+        }
+        if (span.includes(':')) {
+            return t(convertLuceneToDate(span));
+        }
+        else {
+            return t(span);
+        }
+    }, [span, t]);
+    return (_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "start", spacing: 1, children: [_jsx(Tooltip, { title: t(`route.views.manager.${type}`), children: {
+                            readonly: _jsx(Lock, { fontSize: "small" }),
+                            global: _jsx(Language, { fontSize: "small" }),
+                            personal: _jsx(Person, { fontSize: "small" })
+                        }[type] }), _jsx(Typography, { variant: "body1", children: t(title) })] }), _jsx(Typography, { variant: "caption", children: _jsx("code", { children: query }) }), (sort || span) && (_jsxs(Stack, { direction: "row", sx: { mt: 1 }, spacing: 1, children: [sort?.split(',').map(_sort => (_jsx(Chip, { size: "small", label: _sort.split(' ')[0], icon: _sort.endsWith('desc') ? _jsx(ArrowDownward, {}) : _jsx(ArrowUpward, {}) }, _sort.split(' ')[0]))), spanLabel && _jsx(Chip, { size: "small", label: spanLabel })] }))] }));
+};

package/components/hooks/useHitActions.d.ts

@@ -0,0 +1,14 @@
+import type { ActionButton } from '@cccsaurora/howler-ui/components/elements/hit/actions/SharedComponents';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+export declare const MANAGE_OPTIONS: Partial<ActionButton>[];
+declare const useHitActions: (_hits: Hit | Hit[]) => {
+    availableTransitions: ActionButton[];
+    canVote: boolean;
+    canAssess: boolean;
+    loading: boolean;
+    manage: (transition: string) => Promise<void>;
+    assess: (assessment: string, skipRationale?: boolean) => Promise<void>;
+    vote: (v: string) => Promise<void>;
+    selectedVote: string;
+};
+export default useHitActions;

package/components/hooks/useHitActions.js

@@ -0,0 +1,191 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import AssignUserDrawer from '@cccsaurora/howler-ui/components/app/drawers/AssignUserDrawer';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { AppDrawerContext } from '@cccsaurora/howler-ui/components/app/providers/AppDrawerProvider';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import RationaleModal from '@cccsaurora/howler-ui/components/elements/display/modals/RationaleModal';
+import { useCallback, useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import useMyApi from './useMyApi';
+import useMySnackbar from './useMySnackbar';
+export const MANAGE_OPTIONS = [
+    { type: 'action', name: 'release', key: 'R', i18nKey: `hit.details.actions.action.release` },
+    { type: 'action', name: 'assign_to_other', key: 'T', i18nKey: `hit.details.actions.action.assign_to_other` },
+    { type: 'action', name: 'start', key: 'Y', i18nKey: `hit.details.actions.action.start` },
+    { type: 'action', name: 'pause', key: 'U', i18nKey: `hit.details.actions.action.pause` },
+    { type: 'action', name: 'resume', key: 'I', i18nKey: `hit.details.actions.action.resume` },
+    { type: 'action', name: 'assign_to_me', key: 'O', i18nKey: `hit.details.actions.action.assign_to_me` },
+    { type: 'action', name: 're_evaluate', key: 'P', i18nKey: `hit.details.actions.action.re_evaluate` },
+    { type: 'action', name: 'demote', key: '-', i18nKey: `hit.details.actions.action.demote` },
+    { type: 'action', name: 'promote', key: '+', i18nKey: `hit.details.actions.action.promote` }
+];
+const useHitActions = (_hits) => {
+    const { t } = useTranslation();
+    const config = useContext(ApiConfigContext);
+    const { user } = useAppUser();
+    const drawer = useContext(AppDrawerContext);
+    const { showModal } = useContext(ModalContext);
+    const { showWarningMessage } = useMySnackbar();
+    const { dispatchApi } = useMyApi();
+    const updateHit = useContextSelector(HitContext, ctx => ctx.updateHit);
+    const [loading, setLoading] = useState(false);
+    const hits = useMemo(() => (Array.isArray(_hits) ? _hits : [_hits]).filter(_hit => !!_hit), [_hits]);
+    const canVote = useMemo(() => hits.every(hit => hit?.howler.assignment !== user.username || hit?.howler.status === 'in-progress'), [hits, user.username]);
+    const canAssess = useMemo(() => hits.every(hit => !(['on-hold', 'resolved'].includes(hit?.howler.status) && hit?.howler.assignment === user.username)), [hits, user.username]);
+    const selectedVote = useMemo(() => {
+        if (hits.length !== 1) {
+            return '';
+        }
+        const hit = hits[0];
+        return hit?.howler.votes.benign.includes(user.email)
+            ? 'benign'
+            : hit?.howler.votes.malicious.includes(user.email)
+                ? 'malicious'
+                : hit?.howler.votes.obscure.includes(user.email)
+                    ? 'obscure'
+                    : '';
+    }, [hits, user.email]);
+    const onAssign = useCallback(() => new Promise((res, rej) => {
+        let done = false;
+        drawer.open({
+            titleKey: 'hit.details.actions.assign',
+            children: (_jsx(AssignUserDrawer, { skipSubmit: true, ids: hits.map(hit => hit.howler.id), assignment: (hits.every(hit => hit.howler.assignment === hits[0].howler.assignment) &&
+                    hits[0]?.howler.assessment) ||
+                    'unassigned', onAssigned: h => {
+                    done = true;
+                    drawer.close();
+                    res(h);
+                } })),
+            onClosed: () => {
+                if (!done) {
+                    rej('unassigned');
+                }
+            }
+        });
+    }), [drawer, hits]);
+    const vote = useCallback(async (v) => {
+        if (v !== selectedVote) {
+            setLoading(true);
+            try {
+                await Promise.all(hits.map(async (hit) => {
+                    const _vote = () => api.hit.transition.post(hit?.howler.id, { transition: 'vote', data: { vote: v, email: user.email } });
+                    const updatedHit = await dispatchApi(_vote(), {
+                        onConflict: async () => {
+                            await api.hit.get(hit?.howler.id);
+                            const newResult = await _vote();
+                            updateHit(newResult);
+                        }
+                    });
+                    if (updatedHit) {
+                        updateHit(updatedHit);
+                    }
+                }));
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+    }, [dispatchApi, hits, selectedVote, updateHit, user.email]);
+    const assess = useCallback(async (assessment, skipRationale = false) => {
+        const rationale = skipRationale
+            ? t('rationale.default', { assessment })
+            : await new Promise(res => {
+                showModal(_jsx(RationaleModal, { onSubmit: _rationale => {
+                        res(_rationale);
+                    } }));
+            });
+        await Promise.all(hits.map(async (hit) => {
+            if (assessment !== hit?.howler.assessment) {
+                setLoading(true);
+                try {
+                    const update = () => api.hit.transition.post(hit?.howler.id, { transition: 'assess', data: { assessment, rationale } });
+                    const updatedHit = await dispatchApi(update(), {
+                        onConflict: async () => {
+                            const updatedData = await api.hit.get(hit?.howler.id);
+                            if (!updatedData.howler.assessment) {
+                                const result = await update();
+                                updateHit(result);
+                            }
+                            else {
+                                updateHit(updatedData);
+                                showWarningMessage(t('hit.actions.conflict.assess'));
+                            }
+                        }
+                    });
+                    if (updatedHit) {
+                        updateHit(updatedHit);
+                    }
+                }
+                finally {
+                    setLoading(false);
+                }
+            }
+        }));
+    }, [dispatchApi, hits, showModal, showWarningMessage, t, updateHit]);
+    const manage = useCallback(async (transition) => {
+        setLoading(true);
+        try {
+            const data = {};
+            if (transition === 'assign_to_other') {
+                data.assignee = await onAssign();
+            }
+            await Promise.all(hits.map(async (hit) => {
+                const update = () => api.hit.transition.post(hit?.howler.id, { transition, data });
+                const updatedHit = await dispatchApi(update(), {
+                    onConflict: async () => {
+                        const updatedData = await api.hit.get(hit?.howler.id);
+                        updateHit(updatedData);
+                        showWarningMessage(t('hit.actions.conflict.manage'));
+                    }
+                });
+                if (updatedHit && updateHit) {
+                    updateHit(updatedHit);
+                }
+            }));
+        }
+        catch (e) {
+            if (e !== 'unassigned') {
+                throw e;
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [dispatchApi, hits, onAssign, showWarningMessage, t, updateHit]);
+    const availableTransitions = useMemo(() => MANAGE_OPTIONS.filter(option => {
+        const name = option.name.toLowerCase();
+        // Is this option one that is valid for the current state?
+        return hits.every(hit => config.config.lookups?.transitions[hit?.howler.status]?.includes(name) &&
+            // If we are assigning or voting, the hit can't be assigned to the current user
+            ((name !== 'assign_to_me' && name !== 'vote') || hit?.howler.assignment !== user.username) &&
+            // If we are running any of these actions, the current user must be assigned the hit
+            ((name !== 'release' && name !== 'start' && name !== 'resume' && name !== 'pause') ||
+                hit?.howler.assignment === user.username) &&
+            // If we're promoting, it has to be a hit
+            (name !== 'promote' || hit?.howler.escalation === 'hit') &&
+            // If we're demoting, it has to be an alert
+            (name !== 'demote' || hit?.howler.escalation === 'alert'));
+    }).map(option => ({
+        ...option,
+        actionFunction: () => {
+            if (!loading) {
+                manage(option.name.toLowerCase());
+            }
+        }
+    })), [config.config.lookups?.transitions, hits, loading, manage, user.username]);
+    return {
+        availableTransitions,
+        canVote,
+        canAssess,
+        loading,
+        manage,
+        assess,
+        vote,
+        selectedVote
+    };
+};
+export default useHitActions;

package/components/hooks/useHitSelection.d.ts

@@ -0,0 +1,8 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type React from 'react';
+declare const useHitSelection: () => {
+    lastSelected: string;
+    setLastSelected: React.Dispatch<React.SetStateAction<string>>;
+    onClick: (e: React.MouseEvent<HTMLDivElement>, hit: Hit) => void;
+};
+export default useHitSelection;

package/components/hooks/useHitSelection.js

@@ -0,0 +1,78 @@
+import { useAppBreadcrumbs } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import useMySitemap from '@cccsaurora/howler-ui/components/hooks/useMySitemap';
+import { useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useContextSelector } from 'use-context-selector';
+const useHitSelection = () => {
+    const navigate = useNavigate();
+    const { setItems } = useAppBreadcrumbs();
+    const { routes } = useMySitemap();
+    const response = useContextSelector(HitSearchContext, ctx => ctx.response);
+    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
+    const addHitToSelection = useContextSelector(HitContext, ctx => ctx.addHitToSelection);
+    const removeHitFromSelection = useContextSelector(HitContext, ctx => ctx.removeHitFromSelection);
+    const clearSelectedHits = useContextSelector(HitContext, ctx => ctx.clearSelectedHits);
+    const setSelected = useContextSelector(ParameterContext, ctx => ctx.setSelected);
+    const [lastSelected, setLastSelected] = useState(null);
+    const onClick = useCallback((e, hit) => {
+        setLastSelected(hit.howler.id);
+        if (e.ctrlKey) {
+            document.getSelection().removeAllRanges();
+            if (selectedHits.some(_hit => _hit.howler.id === hit.howler.id)) {
+                removeHitFromSelection(hit.howler.id);
+            }
+            else {
+                addHitToSelection(hit.howler.id);
+            }
+            e.stopPropagation();
+            return;
+        }
+        if (e.shiftKey) {
+            document.getSelection().removeAllRanges();
+            if (selectedHits.length < 1) {
+                addHitToSelection(hit.howler.id);
+            }
+            else if (lastSelected) {
+                const lastSelectedIndex = response?.items.findIndex(_hit => _hit.howler.id === lastSelected);
+                const currentIndex = response?.items.findIndex(_hit => _hit.howler.id === hit.howler.id);
+                const lowerBound = lastSelectedIndex < currentIndex ? lastSelectedIndex : currentIndex;
+                const upperBound = lastSelectedIndex > currentIndex ? lastSelectedIndex : currentIndex;
+                for (let i = lowerBound; i <= upperBound; i++) {
+                    addHitToSelection(response.items[i]?.howler.id);
+                }
+            }
+            e.stopPropagation();
+            return;
+        }
+        if (hit.howler.is_bundle) {
+            const searchRoute = routes.find(_route => _route.path.startsWith(location.pathname.replace(/^(\/.*)\/.+/, '$1')));
+            const newBreadcrumb = {
+                ...searchRoute,
+                path: location.pathname + location.search
+            };
+            setItems([{ route: newBreadcrumb, matcher: null }]);
+            navigate(`/bundles/${hit.howler.id}?span=date.range.all&query=howler.id%3A*&offset=0`);
+            clearSelectedHits(hit.howler.id);
+        }
+        else {
+            clearSelectedHits(hit.howler.id);
+            setSelected(hit.howler.id);
+        }
+    }, [
+        addHitToSelection,
+        clearSelectedHits,
+        lastSelected,
+        navigate,
+        removeHitFromSelection,
+        response,
+        routes,
+        selectedHits,
+        setItems,
+        setSelected
+    ]);
+    return { lastSelected, setLastSelected, onClick };
+};
+export default useHitSelection;

package/components/hooks/useMyApi.d.ts

@@ -0,0 +1,10 @@
+type DispatchApiConfig = {
+    throwError?: boolean;
+    logError?: boolean;
+    showError?: boolean;
+    onConflict?: () => Promise<void>;
+};
+declare const useMyApi: () => {
+    dispatchApi: <R>(apiCall: Promise<R>, config?: DispatchApiConfig) => Promise<R>;
+};
+export default useMyApi;

package/components/hooks/useMyApi.js

@@ -0,0 +1,43 @@
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { useCallback, useMemo } from 'react';
+const DEFAULT_CONFIG = {
+    throwError: true,
+    logError: false,
+    showError: true,
+    onConflict: null
+};
+const useMyApi = () => {
+    const { showErrorMessage } = useMySnackbar();
+    const dispatchApi = useCallback(
+    // eslint-disable-next-line comma-spacing
+    async (apiCall, config = DEFAULT_CONFIG) => {
+        const { throwError, logError, showError, onConflict } = { ...DEFAULT_CONFIG, ...config };
+        try {
+            const response = await apiCall;
+            return response;
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                if (onConflict && [409, 412].includes(error.cause?.api_status_code)) {
+                    onConflict();
+                    return null;
+                }
+                if (showError) {
+                    showErrorMessage(error.message);
+                }
+                if (logError) {
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+                }
+                if (throwError) {
+                    throw error;
+                }
+            }
+            return null;
+        }
+    }, [showErrorMessage]);
+    return useMemo(() => ({
+        dispatchApi
+    }), [dispatchApi]);
+};
+export default useMyApi;

package/components/hooks/useMyChart.d.ts

@@ -0,0 +1,276 @@
+import 'chartjs-adapter-dayjs-4';
+declare const useMyChart: () => {
+    line: (titleKey: string, subtitleKey?: string) => {
+        responsive: boolean;
+        plugins: {
+            legend: {
+                display: boolean;
+                position: "top";
+                labels: {
+                    color: string;
+                };
+            };
+            title: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            subtitle: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            zoom: {
+                zoom: {
+                    wheel: {
+                        enabled: boolean;
+                        modifierKey: "ctrl";
+                    };
+                    pinch: {
+                        enabled: boolean;
+                    };
+                    mode: "y";
+                };
+                pan: {
+                    enabled: boolean;
+                    mode: "x" | "y" | "xy";
+                };
+                limits: {
+                    y: {
+                        min: number;
+                    };
+                };
+            };
+        };
+        scales: {
+            x: {
+                type: "time";
+                time: {
+                    unit: "day";
+                };
+                ticks: {
+                    color: string;
+                };
+            };
+            y: {
+                beginAtZero: boolean;
+                ticks: {
+                    color: string;
+                };
+            };
+        };
+    };
+    doughnut: (titleKey: string, subtitleKey?: string) => {
+        scales: any;
+        responsive: boolean;
+        plugins: {
+            legend: {
+                display: boolean;
+                position: "top";
+                labels: {
+                    color: string;
+                };
+            };
+            title: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            subtitle: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            zoom: {
+                zoom: {
+                    wheel: {
+                        enabled: boolean;
+                        modifierKey: "ctrl";
+                    };
+                    pinch: {
+                        enabled: boolean;
+                    };
+                    mode: "y";
+                };
+                pan: {
+                    enabled: boolean;
+                    mode: "x" | "y" | "xy";
+                };
+                limits: {
+                    y: {
+                        min: number;
+                    };
+                };
+            };
+        };
+    };
+    bar: (titleKey: string, subtitleKey?: string) => {
+        responsive: boolean;
+        plugins: {
+            legend: {
+                display: boolean;
+                position: "top";
+                labels: {
+                    color: string;
+                };
+            };
+            title: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            subtitle: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            zoom: {
+                zoom: {
+                    wheel: {
+                        enabled: boolean;
+                        modifierKey: "ctrl";
+                    };
+                    pinch: {
+                        enabled: boolean;
+                    };
+                    mode: "y";
+                };
+                pan: {
+                    enabled: boolean;
+                    mode: "x" | "y" | "xy";
+                };
+                limits: {
+                    y: {
+                        min: number;
+                    };
+                };
+            };
+        };
+        scales: {
+            x: {
+                type: "time";
+                time: {
+                    unit: "day";
+                };
+                ticks: {
+                    color: string;
+                };
+            };
+            y: {
+                beginAtZero: boolean;
+                ticks: {
+                    color: string;
+                };
+            };
+        };
+    };
+    scatter: (titleKey: string, subtitleKey?: string) => {
+        responsive: boolean;
+        plugins: {
+            legend: {
+                display: boolean;
+                position: "top";
+                labels: {
+                    color: string;
+                };
+            };
+            title: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            subtitle: {
+                display: boolean;
+                text: string;
+                color: string;
+                font: {
+                    size: number;
+                };
+                padding: {
+                    bottom: number;
+                };
+            };
+            zoom: {
+                zoom: {
+                    wheel: {
+                        enabled: boolean;
+                        modifierKey: "ctrl";
+                    };
+                    pinch: {
+                        enabled: boolean;
+                    };
+                    mode: "y";
+                };
+                pan: {
+                    enabled: boolean;
+                    mode: "x" | "y" | "xy";
+                };
+                limits: {
+                    y: {
+                        min: number;
+                    };
+                };
+            };
+        };
+        scales: {
+            x: {
+                type: "time";
+                time: {
+                    unit: "day";
+                };
+                ticks: {
+                    color: string;
+                };
+            };
+            y: {
+                beginAtZero: boolean;
+                ticks: {
+                    color: string;
+                };
+            };
+        };
+    };
+};
+export default useMyChart;