@cccsaurora/howler-ui 2.18.0-dev.648 → 2.18.0-dev.674

package/components/routes/hits/search/HitContextMenu.js

@@ -1,227 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { AddCircleOutline, Assignment, Edit, HowToVote, KeyboardArrowRight, OpenInNew, QueryStats, RemoveCircleOutline, SettingsSuggest, Terminal } from '@mui/icons-material';
-import { Box, Divider, Fade, ListItemIcon, ListItemText, Menu, MenuItem, MenuList, Paper } from '@mui/material';
-import api from '@cccsaurora/howler-ui/api';
-import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
-import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
-import { TOP_ROW, VOTE_OPTIONS } from '@cccsaurora/howler-ui/components/elements/hit/actions/SharedComponents';
-import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
-import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
-import useMyActionFunctions from '@cccsaurora/howler-ui/components/routes/action/useMyActionFunctions';
-import { capitalize, get, groupBy, isEmpty, toString } from 'lodash-es';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { usePluginStore } from 'react-pluggable';
-import { Link } from 'react-router-dom';
-import { useContextSelector } from 'use-context-selector';
-import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
-import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
-/**
- * Order in which action types should be displayed in the context menu
- */
-const ORDER = ['assessment', 'vote', 'action'];
-/**
- * The margin at the bottom of the screen by which the context menu should be inverted.
- * That is, if right clicking within this many pixels of the bottom, render the context menu to the top right
- * of the pointer instead of the bottom right.
- */
-const CONTEXTMENU_MARGIN = 350;
-/**
- * Icon mapping for different action types
- */
-const ICON_MAP = {
-    assessment: _jsx(Assignment, {}),
-    vote: _jsx(HowToVote, {}),
-    action: _jsx(Edit, {})
-};
-/**
- * Context menu component for hit operations.
- * Provides quick access to common hit actions including assessment, voting,
- * transitions, and exclusion filters based on template fields.
- */
-const HitContextMenu = ({ children, getSelectedId, Component = Box }) => {
-    const { t } = useTranslation();
-    const { dispatchApi } = useMyApi();
-    const { executeAction } = useMyActionFunctions();
-    const { config } = useContext(ApiConfigContext);
-    const pluginStore = usePluginStore();
-    const { getMatchingAnalytic, getMatchingTemplate } = useMatchers();
-    const query = useContextSelector(ParameterContext, ctx => ctx?.query);
-    const setQuery = useContextSelector(ParameterContext, ctx => ctx?.setQuery);
-    const [id, setId] = useState(null);
-    const hit = useContextSelector(HitContext, ctx => ctx.hits[id]);
-    const selectedHits = useContextSelector(HitContext, ctx => ctx.selectedHits);
-    const [analytic, setAnalytic] = useState(null);
-    const [template, setTemplate] = useState(null);
-    const [anchorEl, setAnchorEl] = useState();
-    const [transformProps, setTransformProps] = useState({});
-    const [actions, setActions] = useState([]);
-    const [show, setShow] = useState({});
-    const hits = useMemo(() => (selectedHits.some(_hit => _hit.howler.id === hit?.howler.id) ? selectedHits : [hit]), [hit, selectedHits]);
-    const { availableTransitions, canVote, canAssess, assess, vote } = useHitActions(hits);
-    /**
-     * Handles right-click context menu events.
-     * Opens the context menu at the click location and loads available actions.
-     */
-    const onContextMenu = useCallback(async (event) => {
-        if (anchorEl) {
-            event.preventDefault();
-            setAnchorEl(null);
-            return;
-        }
-        event.preventDefault();
-        const _id = getSelectedId(event);
-        setId(_id);
-        if (window.innerHeight - event.clientY < 300) {
-            setTransformProps({
-                position: 'fixed',
-                bottom: `${window.innerHeight - event.clientY}px !important`,
-                top: 'unset !important',
-                left: `${event.clientX}px !important`
-            });
-        }
-        else {
-            setTransformProps({
-                position: 'fixed',
-                top: `${event.clientY}px !important`,
-                left: `${event.clientX}px !important`
-            });
-        }
-        setAnchorEl(event.target);
-        const _actions = (await dispatchApi(api.search.action.post({ query: 'action_id:*' }), { throwError: false }))
-            ?.items;
-        if (_actions) {
-            setActions(_actions);
-        }
-    }, [anchorEl, dispatchApi, getSelectedId]);
-    const rowStatus = useMemo(() => ({
-        assessment: canAssess,
-        vote: canVote
-    }), [canAssess, canVote]);
-    const pluginActions = howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.actions`, hits));
-    /**
-     * Generates grouped action entries for the context menu.
-     * Combines transitions, plugin actions, votes, and assessments based on permissions.
-     */
-    const entries = useMemo(() => {
-        let _actions = [...availableTransitions, ...pluginActions];
-        if (canVote) {
-            _actions = [
-                ..._actions,
-                ...VOTE_OPTIONS.map(option => ({ ...option, actionFunction: () => vote(option.name.toLowerCase()) }))
-            ];
-        }
-        if (config.lookups?.['howler.assessment'] && canAssess) {
-            _actions = [
-                ..._actions,
-                ...config.lookups['howler.assessment']
-                    .filter(_assessment => analytic?.triage_settings?.valid_assessments
-                    ? analytic.triage_settings?.valid_assessments.includes(_assessment)
-                    : true)
-                    .sort((a, b) => +TOP_ROW.includes(b) - +TOP_ROW.includes(a))
-                    .map(assessment => ({
-                    type: 'assessment',
-                    name: assessment,
-                    actionFunction: async () => {
-                        await assess(assessment, analytic?.triage_settings?.skip_rationale);
-                    }
-                }))
-            ];
-        }
-        return Object.entries(groupBy(_actions, 'type')).sort(([a], [b]) => ORDER.indexOf(a) - ORDER.indexOf(b));
-    }, [analytic, assess, availableTransitions, canAssess, canVote, config.lookups, vote, pluginActions]);
-    /**
-     * Calculates appropriate styles for submenu positioning.
-     * Adjusts position based on available screen space to prevent overflow.
-     */
-    const calculateSubMenuStyles = useCallback((parent) => {
-        const baseStyles = { position: 'absolute', maxHeight: '300px', overflow: 'auto' };
-        const defaultStyles = { ...baseStyles, top: 0, left: '100%' };
-        if (!parent) {
-            return defaultStyles;
-        }
-        const parentBounds = parent.getBoundingClientRect();
-        if (window.innerHeight - parentBounds.y < CONTEXTMENU_MARGIN) {
-            return { ...baseStyles, bottom: 0, left: '100%' };
-        }
-        return defaultStyles;
-    }, []);
-    // Load analytic and template data when a hit is selected
-    useEffect(() => {
-        if (!hit?.howler.analytic) {
-            return;
-        }
-        getMatchingAnalytic(hit).then(setAnalytic);
-        getMatchingTemplate(hit).then(setTemplate);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hit]);
-    // Reset menu state when context menu is closed
-    useEffect(() => {
-        if (!anchorEl) {
-            setShow({});
-            setAnalytic(null);
-        }
-    }, [anchorEl]);
-    return (_jsxs(Component, { id: "contextMenu", onContextMenu: onContextMenu, children: [children, _jsxs(Menu, { id: "hit-menu", open: !!anchorEl, anchorEl: anchorEl, onClose: () => setAnchorEl(null), slotProps: {
-                    paper: {
-                        sx: {
-                            ...transformProps,
-                            overflow: 'visible !important'
-                        }
-                    }
-                }, MenuListProps: { dense: true, sx: { minWidth: '250px' } }, anchorOrigin: { vertical: 'top', horizontal: 'left' }, onClick: () => setAnchorEl(null), children: [_jsxs(MenuItem, { component: Link, to: `/hits/${hit?.howler.id}`, disabled: !hit, children: [_jsx(ListItemIcon, { children: _jsx(OpenInNew, {}) }), _jsx(ListItemText, { children: t('hit.panel.open') })] }), _jsxs(MenuItem, { component: Link, to: `/analytics/${analytic?.analytic_id}`, disabled: !analytic, children: [_jsx(ListItemIcon, { children: _jsx(QueryStats, {}) }), _jsx(ListItemText, { children: t('hit.panel.analytic.open') })] }), _jsx(Divider, {}), entries.map(([type, items]) => (_jsxs(MenuItem, { id: `${type}-menu-item`, sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, [type]: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, [type]: null })), disabled: rowStatus[type] === false, children: [_jsx(ListItemIcon, { children: ICON_MAP[type] ?? _jsx(Terminal, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t(`hit.details.actions.${type}`) }), rowStatus[type] !== false && (_jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } })), _jsx(Fade, { in: !!show[type], unmountOnExit: true, children: _jsx(Paper, { id: `${type}-submenu`, sx: calculateSubMenuStyles(show[type]), elevation: 8, children: _jsx(MenuList, { sx: { p: 0, borderTopLeftRadius: 0 }, dense: true, role: "group", children: items.map(a => (_jsx(MenuItem, { value: a.name, onClick: a.actionFunction, children: a.i18nKey ? t(a.i18nKey) : capitalize(a.name) }, a.name))) }) }) })] }, type))), _jsxs(MenuItem, { id: "actions-menu-item", sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, actions: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, actions: null })), disabled: actions.length < 1, children: [_jsx(ListItemIcon, { children: _jsx(SettingsSuggest, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t('route.actions.change') }), actions.length > 0 && _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show.actions, unmountOnExit: true, children: _jsx(Paper, { id: "actions-submenu", sx: calculateSubMenuStyles(show.actions), elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, role: "group", children: actions.map(action => (_jsx(MenuItem, { onClick: () => executeAction(action.action_id, `howler.id:${hit?.howler.id}`), children: _jsx(ListItemText, { children: action.name }) }, action.action_id))) }) }) })] }), !isEmpty(template?.keys ?? []) && setQuery && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(MenuItem, { id: "excludes-menu-item", sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, excludes: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, excludes: null })), children: [_jsx(ListItemIcon, { children: _jsx(RemoveCircleOutline, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t('hit.panel.exclude') }), _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show.excludes, unmountOnExit: true, children: _jsx(Paper, { id: "excludes-submenu", sx: calculateSubMenuStyles(show.excludes), elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, role: "group", children: template?.keys.map(key => {
-                                                    // Build exclusion query based on current query and field value
-                                                    let newQuery = '';
-                                                    if (query !== DEFAULT_QUERY) {
-                                                        newQuery = `(${query}) AND `;
-                                                    }
-                                                    const value = get(hit, key);
-                                                    if (!value) {
-                                                        return null;
-                                                    }
-                                                    else if (Array.isArray(value)) {
-                                                        // Handle array values by excluding all items
-                                                        const sanitizedValues = value
-                                                            .map(toString)
-                                                            .filter(val => !!val)
-                                                            .map(val => `"${sanitizeLuceneQuery(val)}"`);
-                                                        if (sanitizedValues.length < 1) {
-                                                            return null;
-                                                        }
-                                                        newQuery += `-${key}:(${sanitizedValues.join(' OR ')})`;
-                                                    }
-                                                    else {
-                                                        // Handle single value
-                                                        newQuery += `-${key}:"${sanitizeLuceneQuery(value.toString())}"`;
-                                                    }
-                                                    return (_jsx(MenuItem, { onClick: () => setQuery(newQuery), children: _jsx(ListItemText, { children: key }) }, key));
-                                                }) }) }) })] }), _jsxs(MenuItem, { id: "includes-menu-item", sx: { position: 'relative' }, onMouseEnter: ev => setShow(_show => ({ ..._show, includes: ev.target })), onMouseLeave: () => setShow(_show => ({ ..._show, includes: null })), children: [_jsx(ListItemIcon, { children: _jsx(AddCircleOutline, {}) }), _jsx(ListItemText, { sx: { flex: 1 }, children: t('hit.panel.include') }), _jsx(KeyboardArrowRight, { fontSize: "small", sx: { color: 'text.secondary', mr: -1 } }), _jsx(Fade, { in: !!show.includes, unmountOnExit: true, children: _jsx(Paper, { id: "includes-submenu", sx: calculateSubMenuStyles(show.includes), elevation: 8, children: _jsx(MenuList, { sx: { p: 0 }, dense: true, role: "group", children: template?.keys.map(key => {
-                                                    // Build inclusion query based on current query and field
-                                                    // If default, we include default query
-                                                    let newQuery = `(${query}) AND `;
-                                                    const value = get(hit, key);
-                                                    if (!value) {
-                                                        return null;
-                                                    }
-                                                    else if (Array.isArray(value)) {
-                                                        // Handle array values by including all items
-                                                        const sanitizedValues = value
-                                                            .map(toString)
-                                                            .filter(val => !!val)
-                                                            .map(val => `"${sanitizeLuceneQuery(val)}"`);
-                                                        if (sanitizedValues.length < 1) {
-                                                            return null;
-                                                        }
-                                                        newQuery += `${key}:(${sanitizedValues.join(' OR ')})`;
-                                                    }
-                                                    else {
-                                                        // Handle single value
-                                                        newQuery += `${key}:"${sanitizeLuceneQuery(value.toString())}"`;
-                                                    }
-                                                    return (_jsx(MenuItem, { onClick: () => setQuery(newQuery), children: _jsx(ListItemText, { children: key }) }, key));
-                                                }) }) }) })] })] }))] })] }));
-};
-export default HitContextMenu;