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

package/components/elements/record/RecordContextMenu.js

@@ -0,0 +1,268 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AddCircleOutline, Assignment, CreateNewFolder, Edit, HowToVote, NoteAdd, OpenInNew, QueryStats, RemoveCircleOutline, SettingsSuggest, Terminal } from '@mui/icons-material';
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
+import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
+import ContextMenu, {} from '@cccsaurora/howler-ui/components/elements/ContextMenu';
+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 AddRecordToCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/AddRecordToCaseModal';
+import CreateCaseModal from '@cccsaurora/howler-ui/components/routes/cases/modals/CreateCaseModal';
+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 { useContextSelector } from 'use-context-selector';
+import { DEFAULT_QUERY } from '@cccsaurora/howler-ui/utils/constants';
+import { sanitizeLuceneQuery } from '@cccsaurora/howler-ui/utils/stringUtils';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
+/**
+ * Order in which action types should be displayed in the context menu
+ */
+const ORDER = ['assessment', 'vote', 'action'];
+/**
+ * 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 RecordContextMenu = ({ children, getSelectedId, Component }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { executeAction } = useMyActionFunctions();
+    const appUser = useAppUser();
+    const { config } = useContext(ApiConfigContext);
+    const { showModal } = useContext(ModalContext);
+    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 record = useContextSelector(RecordContext, ctx => ctx.records[id]);
+    const selectedRecords = useContextSelector(RecordContext, ctx => ctx.selectedRecords);
+    const [analytic, setAnalytic] = useState(null);
+    const [template, setTemplate] = useState(null);
+    const [actions, setActions] = useState([]);
+    const records = useMemo(() => selectedRecords.some(_record => _record.howler.id === record?.howler.id)
+        ? selectedRecords
+        : record
+            ? [record]
+            : [], [record, selectedRecords]);
+    const hits = useMemo(() => records.filter(isHit), [records]);
+    const { availableTransitions, canVote, canAssess, assess, vote } = useHitActions(hits);
+    /**
+     * Checks if the current user has permission to run actions.
+     * Users must have one of the automation or actionrunner roles, or be an admin.
+     */
+    const canRunActions = useCallback(() => {
+        const roles = ['admin', 'automation_advanced', 'automation_basic', 'actionrunner_advanced', 'actionrunner_basic'];
+        return roles.some((role) => appUser.user?.roles?.includes(role));
+    }, [appUser.user?.roles]);
+    /**
+     * Called by ContextMenu after the menu is positioned and opened.
+     * Identifies the clicked record and fetches available actions.
+     */
+    const onOpen = useCallback(async (event) => {
+        const _id = getSelectedId(event);
+        setId(_id);
+        // TODO: Bumping the number of rows is a temporary fix - we'll need to improve this.
+        const _actions = (await dispatchApi(api.search.action.post({ query: 'action_id:*', rows: 100, sort: 'name asc' }), {
+            throwError: false
+        }))?.items;
+        if (_actions) {
+            setActions(_actions);
+        }
+    }, [dispatchApi, getSelectedId]);
+    const rowStatus = useMemo(() => ({
+        assessment: canAssess,
+        vote: canVote
+    }), [canAssess, canVote]);
+    const pluginActions = howlerPluginStore.plugins.flatMap(plugin => pluginStore.executeFunction(`${plugin}.actions`, records));
+    /**
+     * 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]);
+    // Load analytic and template data when a hit is selected
+    useEffect(() => {
+        if (!record?.howler.analytic) {
+            return;
+        }
+        void getMatchingAnalytic(record).then(setAnalytic);
+        void getMatchingTemplate(record).then(setTemplate);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [record]);
+    /**
+     * Builds the declarative items structure for the ContextMenu component.
+     */
+    const items = useMemo(() => {
+        const result = [
+            {
+                kind: 'item',
+                id: 'open-record',
+                icon: _jsx(OpenInNew, {}),
+                label: t(`${record?.__index ?? 'hit'}.open`),
+                disabled: !record,
+                to: `/${record?.__index}s/${record?.howler.id}`
+            }
+        ];
+        if (isHit(record)) {
+            result.push({
+                kind: 'item',
+                id: 'open-analytic',
+                icon: _jsx(QueryStats, {}),
+                label: t('analytic.open'),
+                disabled: !analytic,
+                to: `/analytics/${analytic?.analytic_id}`
+            });
+            result.push({ kind: 'divider', id: 'actions-divider' });
+            for (const [type, typeItems] of entries) {
+                result.push({
+                    kind: 'submenu',
+                    id: type,
+                    icon: ICON_MAP[type] ?? _jsx(Terminal, {}),
+                    label: t(`hit.details.actions.${type}`),
+                    disabled: rowStatus[type] === false,
+                    items: typeItems.map(a => ({
+                        key: a.name,
+                        label: a.i18nKey ? t(a.i18nKey) : capitalize(a.name),
+                        onClick: a.actionFunction
+                    }))
+                });
+            }
+            result.push({
+                kind: 'submenu',
+                id: 'actions',
+                icon: _jsx(SettingsSuggest, {}),
+                label: t('route.actions.change'),
+                disabled: actions.length < 1 || !canRunActions(),
+                items: actions.map(action => ({
+                    key: action.action_id,
+                    label: action.name,
+                    onClick: () => executeAction(action.action_id, `howler.id:(${records.map(r => r.howler.id).join(' OR ')})`)
+                }))
+            });
+            if (!isEmpty(template?.keys ?? []) && setQuery) {
+                result.push({ kind: 'divider', id: 'filter-divider' });
+                result.push({
+                    kind: 'submenu',
+                    id: 'excludes',
+                    icon: _jsx(RemoveCircleOutline, {}),
+                    label: t('hit.panel.exclude'),
+                    items: (template?.keys ?? []).flatMap(key => {
+                        let newQuery = '';
+                        if (query !== DEFAULT_QUERY) {
+                            newQuery = `(${query}) AND `;
+                        }
+                        const value = get(record, key);
+                        if (!value) {
+                            return [];
+                        }
+                        else if (Array.isArray(value)) {
+                            const sanitizedValues = value
+                                .map(toString)
+                                .filter(val => !!val)
+                                .map(val => `"${sanitizeLuceneQuery(val)}"`);
+                            if (sanitizedValues.length < 1) {
+                                return [];
+                            }
+                            newQuery += `-${key}:(${sanitizedValues.join(' OR ')})`;
+                        }
+                        else {
+                            newQuery += `-${key}:"${sanitizeLuceneQuery(value.toString())}"`;
+                        }
+                        return [{ key, label: key, onClick: () => setQuery(newQuery) }];
+                    })
+                });
+                result.push({
+                    kind: 'submenu',
+                    id: 'includes',
+                    icon: _jsx(AddCircleOutline, {}),
+                    label: t('hit.panel.include'),
+                    items: (template?.keys ?? []).flatMap(key => {
+                        let newQuery = `(${query}) AND `;
+                        const value = get(record, key);
+                        if (!value) {
+                            return [];
+                        }
+                        else if (Array.isArray(value)) {
+                            const sanitizedValues = value
+                                .map(toString)
+                                .filter(val => !!val)
+                                .map(val => `"${sanitizeLuceneQuery(val)}"`);
+                            if (sanitizedValues.length < 1) {
+                                return [];
+                            }
+                            newQuery += `${key}:(${sanitizedValues.join(' OR ')})`;
+                        }
+                        else {
+                            newQuery += `${key}:"${sanitizeLuceneQuery(value.toString())}"`;
+                        }
+                        return [{ key, label: key, onClick: () => setQuery(newQuery) }];
+                    })
+                });
+            }
+        }
+        result.push({ kind: 'divider', id: 'add-to-case-divider' });
+        result.push({
+            kind: 'item',
+            id: 'add-to-case',
+            icon: _jsx(CreateNewFolder, {}),
+            label: t('modal.cases.add_to_case'),
+            disabled: !record,
+            onClick: () => showModal(_jsx(AddRecordToCaseModal, { records: records }), { maxHeight: '90vh' })
+        });
+        result.push({
+            kind: 'item',
+            id: 'create-case',
+            icon: _jsx(NoteAdd, {}),
+            label: t('modal.cases.create_case'),
+            disabled: !record,
+            onClick: () => showModal(_jsx(CreateCaseModal, { records: records }), { maxHeight: '90vh' })
+        });
+        return result;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [record, analytic, template, entries, rowStatus, actions, query, t, setQuery, executeAction, showModal, records]);
+    return (_jsx(ContextMenu, { id: "contextMenu", Component: Component, onOpen: onOpen, onClose: () => setAnalytic(null), items: items, children: children }));
+};
+export default RecordContextMenu;

package/components/elements/record/RecordContextMenu.test.d.ts

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