@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/components/elements/hit/HitSummary.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Analytics, InfoOutlined } from '@mui/icons-material';
+import { Alert, AlertTitle, Autocomplete, Box, Button, Chip, CircularProgress, Divider, Fade, Grid, LinearProgress, Stack, TextField, Tooltip, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { FieldContext } from '@cccsaurora/howler-ui/components/app/providers/FieldProvider';
+import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+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 { isEmpty } from 'lodash-es';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { convertCustomDateRangeToLucene, convertDateToLucene, getTimeRange } from '@cccsaurora/howler-ui/utils/utils';
+import PluginChip from '../PluginChip';
+import HitGraph from './aggregate/HitGraph';
+const HitSummary = ({ query, response, onStart, onComplete }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { hitFields } = useContext(FieldContext);
+    const { showErrorMessage } = useMySnackbar();
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const { getMatchingTemplate } = useMatchers();
+    const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
+    const viewId = useContextSelector(HitSearchContext, ctx => ctx.viewId);
+    const searching = useContextSelector(HitSearchContext, ctx => ctx.searching);
+    const error = useContextSelector(HitSearchContext, ctx => ctx.error);
+    const span = useContextSelector(ParameterContext, ctx => ctx.span);
+    const startDate = useContextSelector(ParameterContext, ctx => ctx.startDate);
+    const endDate = useContextSelector(ParameterContext, ctx => ctx.endDate);
+    const [loading, setLoading] = useState(false);
+    const [customKeys, setCustomKeys] = useState([]);
+    const [keyCounts, setKeyCounts] = useState({});
+    const [aggregateResults, setAggregateResults] = useState({});
+    const performAggregation = useCallback(async () => {
+        if (onStart) {
+            onStart();
+        }
+        const filters = [];
+        if (span && !span.endsWith('custom')) {
+            filters.push(`event.created:${convertDateToLucene(span)}`);
+        }
+        else if (startDate && endDate) {
+            filters.push(`event.created:${convertCustomDateRangeToLucene(startDate, endDate)}`);
+        }
+        try {
+            // Get a list of every key in every template of the hits we're searching
+            const rawCounts = await Promise.all((response?.items ?? []).map(async (h) => {
+                const matchingTemplate = await getMatchingTemplate(h);
+                return (matchingTemplate?.keys ?? [])
+                    .filter(key => !['howler.id', 'howler.hash'].includes(key))
+                    .map(key => ({
+                    key,
+                    source: `${matchingTemplate.analytic}: ${matchingTemplate.detection ?? t('any')}`
+                }));
+            }));
+            const _keyCounts = rawCounts
+                .flat()
+                .concat(customKeys.map(key => ({ key, source: 'custom' })))
+                // Take that array and reduce it to unique keys and the number of times we see it,
+                // as well as the templates we sourced this key from
+                .reduce((acc, val) => {
+                if (acc[val.key] && val.source !== 'custom') {
+                    acc[val.key].count++;
+                }
+                else if (val.source === 'custom') {
+                    acc[val.key] = {
+                        count: -1,
+                        sources: [val.source]
+                    };
+                }
+                else {
+                    acc[val.key] = {
+                        count: 1,
+                        sources: [val.source]
+                    };
+                }
+                return acc;
+            }, {});
+            // We'll save this for later
+            setKeyCounts(_keyCounts);
+            setAggregateResults({});
+            // Sort the fields based on the number of occurrences
+            const sortedKeys = Object.keys(_keyCounts).sort((a, b) => (_keyCounts[b]?.count ?? 0) - (_keyCounts[a]?.count ?? 0));
+            if (sortedKeys.length > 0) {
+                setLoading(true);
+                const result = await dispatchApi(api.search.facet.hit.post({
+                    fields: sortedKeys,
+                    query,
+                    rows: pageCount,
+                    filters
+                }), {
+                    throwError: false,
+                    logError: true,
+                    showError: false
+                });
+                if (result) {
+                    setAggregateResults(_results => ({
+                        ..._results,
+                        ...result
+                    }));
+                }
+            }
+        }
+        catch (e) {
+            showErrorMessage(e);
+            setAggregateResults({});
+        }
+        finally {
+            setLoading(false);
+            if (onComplete) {
+                onComplete();
+            }
+        }
+    }, [
+        customKeys,
+        dispatchApi,
+        endDate,
+        getMatchingTemplate,
+        onComplete,
+        onStart,
+        pageCount,
+        query,
+        response?.items,
+        showErrorMessage,
+        span,
+        startDate,
+        t
+    ]);
+    const setSearch = useCallback((key, value) => {
+        setQuery(`${key}:${value}`);
+    }, [setQuery]);
+    useEffect(() => {
+        if ((!query && !viewId) || searching || error) {
+            return;
+        }
+        performAggregation();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [query, viewId, searching, error]);
+    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), _jsx(HitGraph, { query: query }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
+                        .filter(key => !isEmpty(aggregateResults[key]))
+                        .flatMap(key => [
+                        _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count ?? '?', " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key]?.sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source))) ?? '?'] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),
+                        _jsx(Fade, { in: true, children: hitFields.find(f => f.key === key)?.type !== 'date' ? (_jsx(Box, { sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), children: _jsx(Grid, { container: true, sx: theme => ({ mr: 1, mt: theme.spacing(-1) }), spacing: 1, children: Object.keys(aggregateResults[key]).map(item => (_jsx(Grid, { item: true, xs: "auto", children: _jsx(PluginChip, { context: "summary", size: "small", variant: "filled", value: item, label: `${item} (${aggregateResults[key][item]})`, onClick: () => setSearch(key, `"${item}"`), field: key }) }, item))) }, key + '-list') })) : (_jsx(Chip, { size: "small", sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), label: getTimeRange(Object.keys(aggregateResults[key]))
+                                    .map(d => new Date(d).toLocaleString())
+                                    .join(' - '), onClick: () => setSearch(key, `[${getTimeRange(Object.keys(aggregateResults[key])).join(' TO ')}]`) })) }, key + '-results')
+                    ])] })] }));
+};
+export default memo(HitSummary);

package/components/elements/hit/HitWorklog.d.ts

@@ -0,0 +1,10 @@
+import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { FC } from 'react';
+declare const HitWorklog: FC<{
+    hit: Hit;
+    users: {
+        [id: string]: HowlerUser;
+    };
+}>;
+export default HitWorklog;

package/components/elements/hit/HitWorklog.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { KeyboardArrowUp } from '@mui/icons-material';
+import { CardContent, CardHeader, Divider, Skeleton, Stack, Tooltip, Typography, useTheme } from '@mui/material';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import useMyUtils from '@cccsaurora/howler-ui/components/hooks/useMyUtils';
+import { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { compareTimestamp, twitterShort } from '@cccsaurora/howler-ui/utils/utils';
+import HowlerAvatar from '../display/HowlerAvatar';
+import HowlerCard from '../display/HowlerCard';
+import Markdown from '../display/Markdown';
+const HitWorklog = ({ hit, users }) => {
+    const theme = useTheme();
+    const { shiftColor } = useMyUtils();
+    const { t } = useTranslation();
+    // This value tracks the latest hit version we have seen.
+    // That way, when we see a new version, we can highlight the new changes in the UI
+    const [initialVersions, setInitialVersions] = useMyLocalStorageItem(StorageKey.LAST_SEEN, {});
+    /**
+     * The variable that tracks the grouped worklog entries. For the sake of readability, we group together log items that are close in time and created
+     * by the same user. We also add a split between previously seen and new worklog entries.
+     */
+    const worklogGroups = useMemo(() => {
+        let setInitialVersion = false;
+        return (hit?.howler?.log || [])
+            .slice()
+            .sort((a, b) => compareTimestamp(b.timestamp, a.timestamp))
+            .reduce((acc, l) => {
+            if (!initialVersions[hit.howler.id] && !setInitialVersion) {
+                setInitialVersion = true;
+                setInitialVersions({
+                    ...initialVersions,
+                    [hit.howler.id]: l.previous_version
+                });
+            }
+            // Initialize the worklog card groups
+            if (!acc.length) {
+                return [[l]];
+            }
+            // Get the the most recent worklog card
+            const currArr = acc[acc.length - 1];
+            if (
+            // Does this log version match the saved version?
+            l.previous_version === initialVersions[hit.howler.id] &&
+                // Does the previous entry not match?
+                currArr[currArr.length - 1].previous_version !== initialVersions[hit.howler.id]) {
+                // If so, we've figured out where the new logs should start, so we start a new card.
+                acc.push([l]);
+                return acc;
+            }
+            // If a different user added this to the log, or enough time has passed, we start a new card
+            if (currArr[0].user === l.user && compareTimestamp(currArr[0].timestamp, l.timestamp) < 60 * 5) {
+                currArr.push(l);
+                return acc;
+            }
+            acc.push([l]);
+            return acc;
+        }, []);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hit?.howler?.log]);
+    useEffect(() => {
+        // On unmount, mark the latest entry version as the last seen version.
+        return () => {
+            if (hit?.howler.id) {
+                setInitialVersions({
+                    ...initialVersions,
+                    [hit.howler.id]: worklogGroups[0][0]?.previous_version ?? initialVersions[hit.howler.id]
+                });
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // We now render the actual HTML from our grouped worklog items
+    const worklogEls = useMemo(() => {
+        if (worklogGroups.length > 0) {
+            return worklogGroups.flatMap((ls, index) => {
+                const result = [];
+                if (index > 0 && initialVersions[hit.howler.id] && ls[0].previous_version === initialVersions[hit.howler.id]) {
+                    result.push(_jsx(Divider, { children: _jsxs(Stack, { direction: "row", children: [_jsx(KeyboardArrowUp, { sx: { color: 'text.secondary' }, fontSize: "small" }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('hit.worklog.new') }), _jsx(KeyboardArrowUp, { sx: { color: 'text.secondary' }, fontSize: "small" })] }) }, "new"));
+                }
+                result.push(_jsxs(HowlerCard, { elevation: 4, children: [_jsx(CardHeader, { avatar: _jsx(HowlerAvatar, { userId: ls[0].user }), title: users[ls[0].user]?.name ?? ls[0].user, subheader: _jsx(Tooltip, { title: new Date(ls[0].timestamp).toLocaleString(), children: _jsx(Typography, { variant: "caption", children: twitterShort(ls[0].timestamp) }) }) }), _jsx(CardContent, { children: _jsx(Stack, { spacing: 1, divider: _jsx(Divider, { orientation: "horizontal" }), children: ls.map(l => (_jsxs(Typography, { variant: "body2", color: "text.secondary", component: "div", position: "relative", children: [l.explanation ? (_jsx(Markdown, { md: l.explanation.trim() })) : (_jsxs(_Fragment, { children: [_jsxs("span", { children: [t('hit.worklog.updated'), "\u00A0"] }), _jsx("code", { children: l.key }), _jsx("span", { children: ":\u00A0" }), {
+                                                    set: (_jsxs("span", { children: [l.previous_value, " ", t('hit.worklog.set'), " ", l.new_value] })),
+                                                    appended: (_jsxs("span", { children: [l.new_value, " ", t('hit.worklog.appended'), " ", l.previous_value?.replace(/[[\]]/g, '')] })),
+                                                    removed: (_jsxs("span", { children: [l.new_value, " ", t('hit.worklog.removed'), " ", l.previous_value?.replace(/[[\]]/g, '')] }))
+                                                }[l.type]] })), ls.length > 1 && (_jsx(Tooltip, { title: new Date(l.timestamp).toLocaleString(), children: _jsx(Typography, { sx: { ml: 0.5, position: 'absolute', right: '1rem', top: 0 }, variant: "caption", color: shiftColor(theme.palette.text.primary, 0.5), children: twitterShort(l.timestamp) }) }))] }, l.timestamp))) }) })] }, ls[0].timestamp));
+                return result;
+            });
+        }
+        else if (!hit?.howler) {
+            return (_jsxs(_Fragment, { children: [_jsx(Skeleton, { width: "100%", height: 200, variant: "rounded" }), _jsx(Skeleton, { width: "100%", height: 220, variant: "rounded" }), _jsx(Skeleton, { width: "100%", height: 150, variant: "rounded" })] }));
+        }
+    }, [worklogGroups, hit.howler, initialVersions, users, t, shiftColor, theme.palette.text.primary]);
+    return (_jsx(Stack, { sx: { p: 2 }, spacing: 1, children: worklogEls }));
+};
+export default HitWorklog;

package/components/elements/hit/actions/ButtonActions.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import { HitShortcuts } from '../HitShortcuts';
+import type { ActionButton } from './SharedComponents';
+interface DesktopActionProps {
+    actions: ActionButton[];
+    loading: boolean;
+    shortcuts: HitShortcuts;
+    currentVote: string;
+    orientation: 'horizontal' | 'vertical';
+}
+declare const ButtonActions: FC<DesktopActionProps>;
+export default ButtonActions;

package/components/elements/hit/actions/ButtonActions.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Stack, styled, Tooltip } from '@mui/material';
+import { blueGrey } from '@mui/material/colors';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HitShortcuts } from '../HitShortcuts';
+import { TOP_ROW } from './SharedComponents';
+const StyledBadge = styled(Badge)({
+    '& .MuiBadge-badge': {
+        borderRadius: '4px',
+        background: blueGrey[400],
+        fontSize: 9,
+        height: '15px',
+        minWidth: '15px',
+        padding: '0',
+        right: '5px',
+        top: '2.5px'
+    }
+});
+const ButtonActions = ({ actions, loading, orientation, shortcuts, currentVote }) => {
+    const { t } = useTranslation();
+    const isHorizontal = useMemo(() => orientation === 'horizontal', [orientation]);
+    const showShortcuts = useMemo(() => shortcuts === HitShortcuts.SHORTCUTS_HINT, [shortcuts]);
+    const actionRows = useMemo(() => actions
+        .filter(action => action.type === 'action')
+        .reduce(([top, bottom], action) => {
+        if (top.length === bottom.length) {
+            top.push(action);
+        }
+        else {
+            bottom.push(action);
+        }
+        return [top, bottom];
+    }, [[], []]), [actions]);
+    const assessmentRows = useMemo(() => actions
+        .filter(action => action.type === 'assessment')
+        .reduce(([top, bottom], action) => {
+        if (TOP_ROW.includes(action.name)) {
+            top.push(action);
+        }
+        else {
+            bottom.push(action);
+        }
+        return [top, bottom];
+    }, [[], []]) ?? [], [actions]);
+    return (_jsxs(Stack, { direction: isHorizontal ? 'row' : 'column', spacing: 0.75, alignItems: !isHorizontal && 'start', py: 1, sx: { position: 'relative', flex: 1 }, justifyContent: "space-between", children: [_jsxs(FormControl, { disabled: loading, sx: [
+                    {
+                        display: 'grid',
+                        justifyContent: 'stretch',
+                        gap: 0.8
+                    },
+                    isHorizontal
+                        ? {
+                            // If you want to understand the disgusting, unholy grid shenanigans that's going on here, talk to Matt R
+                            // If you want to complain about how bad this is, talk to Ben
+                            gridTemplateRows: 'auto 1fr 1fr', // Make sure the buttons are the same height
+                            gridAutoColumns: 'minmax(0, 125px)', // Make sure the buttons are the same width
+                            // God help me
+                            gridTemplateColumns: `repeat(auto, 125px)`
+                            // Why do we need to use both gridTemplateColumns AND gridAutoColumns, you ask?
+                            // I DON'T KNOW ASK WHOEVER WROTE THE CSS GRID SPEC
+                        }
+                        : {
+                            gridTemplateColumns: '1fr 1fr'
+                        }
+                ], children: [_jsx(FormLabel, { children: t('hit.details.actions.action') }), actionRows.flatMap((row, rowIndex) => row.map((option, index) => {
+                        const gridSx = isHorizontal
+                            ? { gridColumn: index, gridRow: rowIndex + 2 }
+                            : { gridColumn: rowIndex + 1, gridRow: index + 2 };
+                        const button = (_jsx(Button, { size: "small", variant: "outlined", color: "secondary", disabled: loading, onClick: option.actionFunction, sx: [
+                                {
+                                    width: '100%',
+                                    p: 0.6
+                                },
+                                gridSx,
+                                isHorizontal && (theme => ({ fontSize: theme.typography.caption.fontSize }))
+                            ], children: option.i18nKey ? t(option.i18nKey) : option.name }, option.name));
+                        if (showShortcuts) {
+                            return (_jsx(StyledBadge, { badgeContent: option.key, sx: gridSx, children: button }, option.name));
+                        }
+                        return button;
+                    })), assessmentRows.flat().length > 0 && (_jsx(FormLabel, { sx: isHorizontal
+                            ? {
+                                gridRow: 1,
+                                gridColumn: actionRows[0].length + 1
+                            }
+                            : { gridRow: actionRows[0].length + 2 }, children: t('hit.details.actions.assessment') })), assessmentRows.flatMap((row, rowIndex) => row.map((action, index) => {
+                        const gridSx = isHorizontal
+                            ? {
+                                gridColumn: index + 1 + actionRows[0].length,
+                                gridRow: rowIndex + 2
+                            }
+                            : { gridColumn: rowIndex + 1, gridRow: index + 3 + actionRows[0].length };
+                        const button = (_jsx(Tooltip, { title: t(`hit.details.asessments.${action.name}.description`), children: _jsx(Button, { variant: "outlined", size: "small", disabled: loading, onClick: action.actionFunction, sx: [
+                                    {
+                                        width: '100%',
+                                        p: 0.6
+                                    },
+                                    gridSx,
+                                    isHorizontal && (theme => ({ fontSize: theme.typography.caption.fontSize }))
+                                ], children: action.name }, action.name) }));
+                        if (showShortcuts) {
+                            return (_jsx(StyledBadge, { badgeContent: action.key, sx: gridSx, children: button }, action.key));
+                        }
+                        return button;
+                    }))] }), _jsxs(FormControl, { disabled: loading || !actions.some(action => action.type === 'vote'), sx: { opacity: +actions.some(action => action.type === 'vote') }, children: [_jsx(FormLabel, { sx: { mb: 1 }, children: t('hit.details.actions.vote') }), _jsx(RadioGroup, { value: currentVote, children: actions
+                            .filter(action => action.type === 'vote')
+                            .map(action => {
+                            const button = (_jsx(FormControlLabel, { value: action.name.toLowerCase(), sx: { display: 'flex', alignItems: 'center' }, componentsProps: {
+                                    typography: {
+                                        sx: [isHorizontal && (theme => ({ fontSize: theme.typography.caption.fontSize }))]
+                                    }
+                                }, control: _jsx(Radio, { size: "small", sx: [{ mr: 1 }, isHorizontal && { p: 0.5 }] }), label: action.name, onClick: action.actionFunction }, action.key));
+                            if (showShortcuts && action.key) {
+                                return (_jsx(StyledBadge, { badgeContent: action.key, sx: [
+                                        { '& .MuiBadge-badge': { left: '20px', top: '5px', right: 'unset' } },
+                                        loading && { '.MuiBadge-badge': { opacity: '0.5' } }
+                                    ], anchorOrigin: {
+                                        vertical: 'top',
+                                        horizontal: 'left'
+                                    }, children: button }, action.key));
+                            }
+                            return button;
+                        }) })] })] }));
+};
+export default ButtonActions;

package/components/elements/hit/actions/DropdownActions.d.ts

@@ -0,0 +1,12 @@
+import type { FC } from 'react';
+import type { ActionButton } from './SharedComponents';
+interface DropdownActionProps {
+    actions: ActionButton[];
+    currentAssessment: string;
+    currentStatus: string;
+    currentVote: string;
+    loading: boolean;
+    orientation: 'horizontal' | 'vertical';
+}
+declare const DropdownActions: FC<DropdownActionProps>;
+export default DropdownActions;

package/components/elements/hit/actions/DropdownActions.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, formControlClasses, Grid, InputLabel, MenuItem, Select, Skeleton, Stack, Typography } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { capitalize } from 'lodash-es';
+import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+const DropdownActions = ({ actions, currentAssessment, currentStatus, currentVote, loading, orientation }) => {
+    const { t } = useTranslation();
+    const config = useContext(ApiConfigContext);
+    const isHorizontal = useMemo(() => orientation === 'horizontal', [orientation]);
+    if (!config.config.lookups) {
+        return (_jsxs(Grid, { container: true, justifyContent: "end", spacing: 4, p: 2, children: [_jsx(Grid, { item: true, sm: "auto", xs: 12, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) }), _jsx(Grid, { item: true, sm: "auto", xs: 12, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) }), _jsx(Grid, { item: true, sm: "auto", xs: 12, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) })] }));
+    }
+    return (_jsxs(Grid, { container: true, justifyContent: "end", spacing: 2, p: 2, sx: [isHorizontal && { [`& .${formControlClasses.root}`]: { minWidth: '140px' } }], children: [_jsx(Grid, { item: true, sm: !isHorizontal ? true : 'auto', xs: 12, children: _jsxs(FormControl, { disabled: loading, fullWidth: true, children: [_jsx(InputLabel, { id: "transition-label", htmlFor: "transition", children: t('hit.details.actions.action') }), _jsxs(Select, { labelId: "transition-label", id: "transition", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.action'), value: currentStatus, children: [_jsx(MenuItem, { value: currentStatus, sx: { display: 'none' }, children: currentStatus.replace(/-/g, ' ').replace(/^[a-z]/, val => val.toUpperCase()) }), actions
+                                    .filter(_action => _action.type === 'action')
+                                    .map(_action => (_jsx(MenuItem, { value: _action.name, onClick: _action.actionFunction, children: _action.i18nKey ? t(_action.i18nKey) : _action.name }, _action.name)))] })] }) }), _jsx(Grid, { item: true, sm: !isHorizontal ? true : 'auto', xs: 12, children: _jsxs(FormControl, { disabled: loading || !actions.some(action => action.type === 'assessment'), fullWidth: true, children: [_jsx(InputLabel, { id: "assess-label", htmlFor: "assess", children: t('hit.details.actions.assessment') }), _jsxs(Select, { labelId: "assess-label", id: "assess", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.assessment'), value: currentAssessment ?? 'no-assessment', MenuProps: {
+                                anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
+                                transformOrigin: { horizontal: 'left', vertical: 'top' }
+                            }, children: [_jsx(MenuItem, { value: "no-assessment", sx: { display: 'none' }, children: t('hit.details.actions.assessment.noassessment') }), actions
+                                    .filter(action => action.type === 'assessment')
+                                    .map(a => (_jsx(MenuItem, { value: a.name, onClick: a.actionFunction, children: _jsxs(Stack, { direction: "column", children: [_jsx("span", { children: a.name
+                                                    .split(/[ -]/)
+                                                    .map(part => capitalize(part))
+                                                    .join(' ') }), _jsx(Typography, { variant: "caption", color: "text.secondary", maxWidth: "250px", sx: { whiteSpace: 'wrap' }, children: t(`hit.details.asessments.${a.name}.description`) })] }) }, a.name)))] })] }) }), _jsx(Grid, { item: true, sm: !isHorizontal ? true : 'auto', xs: 12, children: _jsxs(FormControl, { disabled: loading || !actions.some(action => action.type === 'vote'), fullWidth: true, children: [_jsx(InputLabel, { id: "vote-label", htmlFor: "vote", children: t('hit.details.actions.vote') }), _jsxs(Select, { labelId: "vote-label", id: "vote", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.vote'), value: currentVote || 'no-vote', children: [_jsx(MenuItem, { value: "no-vote", sx: { display: 'none' }, children: t('hit.details.actions.vote.novote') }), actions
+                                    .filter(action => action.type === 'vote')
+                                    .map(action => (_jsx(MenuItem, { value: action.name.toLowerCase(), onClick: action.actionFunction, children: action.i18nKey ? t(action.i18nKey) : action.name }, action.name)))] })] }) })] }));
+};
+export default DropdownActions;

package/components/elements/hit/actions/SharedComponents.d.ts

@@ -0,0 +1,18 @@
+import type { StyledComponent } from '@emotion/styled';
+import { type BadgeProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export type ActionButton = {
+    type: 'assessment' | 'action' | 'vote';
+    name: string;
+    actionFunction: () => void;
+    key?: string;
+    i18nKey?: string;
+    icon?: ReactNode;
+};
+export type Keybinds = {
+    [key: string]: () => void;
+};
+export declare const TOP_ROW: string[];
+export declare const ASSESSMENT_KEYBINDS: string[];
+export declare const VOTE_OPTIONS: Partial<ActionButton>[];
+export declare const StyledBadge: StyledComponent<BadgeProps>;

package/components/elements/hit/actions/SharedComponents.js

@@ -0,0 +1,21 @@
+import { Badge, styled } from '@mui/material';
+import { blueGrey } from '@mui/material/colors';
+export const TOP_ROW = ['legitimate', 'false-positive', 'ambiguous', 'development', 'security'];
+export const ASSESSMENT_KEYBINDS = ['A', 'S', 'D', 'F', 'G', 'Z', 'X', 'C', 'V', 'B'];
+export const VOTE_OPTIONS = [
+    { name: 'Benign', key: 'Q', type: 'vote' },
+    { name: 'Obscure', key: 'W', type: 'vote' },
+    { name: 'Malicious', key: 'E', type: 'vote' }
+];
+export const StyledBadge = styled(Badge)({
+    '& .MuiBadge-badge': {
+        borderRadius: '4px',
+        background: blueGrey[400],
+        fontSize: 9,
+        height: '15px',
+        minWidth: '15px',
+        padding: '0',
+        right: '5px',
+        top: '2.5px'
+    }
+});

package/components/elements/hit/aggregate/HitGraph.d.ts

@@ -0,0 +1,6 @@
+import 'chartjs-adapter-dayjs-4';
+import type { FC } from 'react';
+declare const HitGraph: FC<{
+    query: string;
+}>;
+export default HitGraph;