@cccsaurora/howler-ui 3.1.0-dev.1610 → 3.1.0-dev.1617

package/package.json

@@ -97,7 +97,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1610",
+  "version": "3.1.0-dev.1617",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",
@@ -129,6 +129,8 @@
     "./api/template": "./api/template/index.js",
     "./api/socket/*": "./api/socket/*.js",
     "./api/socket": "./api/socket/index.js",
+    "./api/dossier/*": "./api/dossier/*.js",
+    "./api/dossier": "./api/dossier/index.js",
     "./api/utils/*": "./api/utils/*.js",
     "./api/v2/*": "./api/v2/*.js",
     "./api/v2": "./api/v2/index.js",
@@ -195,6 +197,7 @@
     "./components/elements/hit/related/*": "./components/elements/hit/related/*.js",
     "./components/elements/hit/aggregate/*": "./components/elements/hit/aggregate/*.js",
     "./components/elements/hit/actions/*": "./components/elements/hit/actions/*.js",
+    "./components/elements/hit/related/pivots/*": "./components/elements/hit/related/pivots/*.js",
     "./components/elements/display/features/*": "./components/elements/display/features/*.js",
     "./components/elements/display/icons/*": "./components/elements/display/icons/*.js",
     "./components/elements/display/json/*": "./components/elements/display/json/*.js",

package/plugins/HowlerPlugin.d.ts

@@ -1,7 +1,7 @@
 import type { HowlerHelper } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
 import type { ActionButton } from '@cccsaurora/howler-ui/components/elements/hit/actions/SharedComponents';
 import type { StatusProps } from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
-import type { PivotLinkProps } from '@cccsaurora/howler-ui/components/elements/hit/related/PivotLink';
+import type { PivotLinkProps } from '@cccsaurora/howler-ui/components/elements/hit/related/pivots/PivotLink';
 import type { PluginChipProps } from '@cccsaurora/howler-ui/components/elements/PluginChip';
 import type { PluginTypographyProps } from '@cccsaurora/howler-ui/components/elements/PluginTypography';
 import type { CustomActionProps } from '@cccsaurora/howler-ui/components/routes/action/edit/ActionEditor';

package/plugins/clue/components/CluePivot.d.ts

@@ -1,3 +1,3 @@
-import type { PivotLinkProps } from '@cccsaurora/howler-ui/components/elements/hit/related/PivotLink';
+import type { PivotLinkProps } from '@cccsaurora/howler-ui/components/elements/hit/related/pivots/PivotLink';
 declare const _default: import("react").NamedExoticComponent<PivotLinkProps>;
 export default _default;

package/plugins/clue/components/CluePivot.js

@@ -12,7 +12,7 @@ import isNil from 'lodash-es/isNil';
 import { memo, useCallback, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { notNil } from '@cccsaurora/howler-ui/utils/utils';
-const CluePivot = ({ pivot, hit, compact }) => {
+const CluePivot = ({ pivot, hit, compact, variant = 'card', onNavigate }) => {
     const guessType = useClueEnrichSelector(ctx => ctx?.guessType);
     const { showErrorMessage } = useMySnackbar();
     const { config } = useContext(ApiConfigContext);
@@ -124,6 +124,22 @@ const CluePivot = ({ pivot, hit, compact }) => {
     if (!actions[pivot.value]) {
         return null;
     }
+    if (variant === 'menu-item') {
+        return (_jsxs(Stack, { component: "button", type: "button", role: "menuitem", onClick: event => {
+                void onClueClick(event);
+                onNavigate?.();
+            }, direction: "row", spacing: 1, alignItems: "center", sx: theme => ({
+                width: '100%',
+                p: 1,
+                border: 0,
+                backgroundColor: 'transparent',
+                color: 'text.primary',
+                cursor: 'pointer',
+                font: 'inherit',
+                textAlign: 'left',
+                '&:hover': { backgroundColor: theme.palette.action.hover }
+            }), children: [_jsx(Icon, { fontSize: "1.5rem", icon: pivot.icon }), _jsx(Typography, { noWrap: true, children: pivot.label[i18n.language] })] }));
+    }
     return (_jsx(HowlerCard, { variant: compact ? 'outlined' : 'elevation', onClick: e => onClueClick(e), sx: [
             theme => ({
                 backgroundColor: 'transparent',

package/plugins/clue/components/CluePivot.test.d.ts

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

package/plugins/clue/components/CluePivot.test.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import CluePivot from './CluePivot';
+const clueState = vi.hoisted(() => ({
+    actions: {},
+    executeAction: vi.fn(),
+    guessType: vi.fn()
+}));
+const showErrorMessage = vi.hoisted(() => vi.fn());
+vi.mock('@cccsaurora/clue-ui', () => ({
+    useClueActionsSelector: (selector) => selector({ availableActions: clueState.actions, executeAction: clueState.executeAction }),
+    useClueEnrichSelector: (selector) => selector({ guessType: clueState.guessType })
+}));
+vi.mock('@iconify/react', () => ({
+    Icon: ({ icon }) => _jsx("span", { "data-testid": "pivot-icon", children: icon })
+}));
+vi.mock('components/elements/display/HowlerCard', () => ({
+    default: ({ children, onClick }) => (_jsx("div", { "data-testid": "howler-card", onClick: onClick, children: children }))
+}));
+vi.mock('components/hooks/useMySnackbar', () => ({
+    default: () => ({ showErrorMessage })
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        i18n: { language: 'en' },
+        t: (key) => key
+    })
+}));
+const action = {
+    accept_multiple: false,
+    params: {
+        properties: {
+            selector: { type: 'string' },
+            note: { type: 'string' }
+        }
+    }
+};
+const pivot = (overrides = {}) => ({
+    value: 'enrich',
+    icon: 'material-symbols:bolt',
+    label: { en: 'Enrich', fr: 'Enrichir' },
+    mappings: [
+        { key: 'selector', field: 'howler.id' },
+        { key: 'note', field: 'custom', custom_value: 'from-pivot' }
+    ],
+    ...overrides
+});
+const hit = { howler: { id: 'hit-1' } };
+const dossier = { dossier_id: 'dossier-1' };
+const Wrapper = ({ children }) => (_jsx(ApiConfigContext.Provider, { value: {
+        config: {
+            indexes: { hit: { 'howler.id': {} } },
+            configuration: { mapping: {} }
+        },
+        setConfig: vi.fn(),
+        loaded: true
+    }, children: children }));
+describe('CluePivot', () => {
+    beforeEach(() => {
+        clueState.actions = { enrich: action };
+        clueState.executeAction.mockReset();
+        clueState.executeAction.mockResolvedValue(undefined);
+        clueState.guessType.mockReset();
+        clueState.guessType.mockReturnValue('indicator');
+        showErrorMessage.mockReset();
+    });
+    it('renders a menu item and executes the mapped action without opening a window', async () => {
+        const user = userEvent.setup();
+        const onNavigate = vi.fn();
+        render(_jsx(Wrapper, { children: _jsx(CluePivot, { pivot: pivot(), hit: hit, dossier: dossier, variant: "menu-item", onNavigate: onNavigate }) }));
+        await user.click(screen.getByRole('menuitem', { name: /Enrich/ }));
+        expect(onNavigate).toHaveBeenCalledOnce();
+        await waitFor(() => {
+            expect(clueState.executeAction).toHaveBeenCalledWith('enrich', [{ type: 'indicator', value: 'hit-1' }], { note: 'from-pivot' }, { forceMenu: false });
+        });
+    });
+    it('passes forceMenu when the settings button is clicked on a card pivot', async () => {
+        const user = userEvent.setup();
+        render(_jsx(Wrapper, { children: _jsx(CluePivot, { pivot: pivot(), hit: hit, dossier: dossier, compact: true }) }));
+        await user.click(screen.getByRole('button', { name: '' }));
+        await waitFor(() => {
+            expect(clueState.executeAction).toHaveBeenCalledWith('enrich', [{ type: 'indicator', value: 'hit-1' }], { note: 'from-pivot' }, { forceMenu: true });
+        });
+    });
+    it('does not render a pivot when its action is unavailable', () => {
+        clueState.actions = {};
+        const { container } = render(_jsx(Wrapper, { children: _jsx(CluePivot, { pivot: pivot(), hit: hit, dossier: dossier }) }));
+        expect(container).toBeEmptyDOMElement();
+        expect(showErrorMessage).not.toHaveBeenCalled();
+    });
+});

package/utils/constants.d.ts

@@ -43,6 +43,7 @@ export declare enum StorageKey {
     GRID_COLUMN_WIDTHS = "grid_column_widths",
     QUERY_HISTORY = "query_history",
     LOGIN_NONCE = "login_nonce",
+    PIVOT_GROUP = "pivot_group",
     DISPLAY_TYPE = "display_type"
 }
 export declare const MOCK_SEARCH_QUERY_STORE = "howler.ui.mock_search_query_store";

package/utils/constants.js

@@ -48,6 +48,7 @@ export var StorageKey;
     StorageKey["GRID_COLUMN_WIDTHS"] = "grid_column_widths";
     StorageKey["QUERY_HISTORY"] = "query_history";
     StorageKey["LOGIN_NONCE"] = "login_nonce";
+    StorageKey["PIVOT_GROUP"] = "pivot_group";
     StorageKey["DISPLAY_TYPE"] = "display_type";
 })(StorageKey || (StorageKey = {}));
 export const MOCK_SEARCH_QUERY_STORE = `${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.MOCK_SEARCH_QUERY_STORE}`;

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

@@ -1,4 +0,0 @@
-import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
-import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
-declare const resolvePivotUrl: (pivot: NonNullable<Dossier['pivots']>[number], currentHit?: Hit) => string;
-export default resolvePivotUrl;

package/components/elements/hit/ResolvePivotUrl.js

@@ -1,22 +0,0 @@
-import Handlebars from 'handlebars';
-import { flattenDeep } from '@cccsaurora/howler-ui/utils/utils';
-const resolvePivotUrl = (pivot, currentHit) => {
-    const flatHit = flattenDeep(currentHit ?? {});
-    const templateObject = Object.fromEntries((pivot.mappings ?? []).map(mapping => {
-        const value = mapping.field === 'custom'
-            ? mapping.custom_value
-            : Array.isArray(flatHit[mapping.field])
-                ? flatHit[mapping.field][0]
-                : flatHit[mapping.field];
-        return [mapping.key, value];
-    }));
-    try {
-        return Handlebars.compile(pivot.value)(templateObject);
-    }
-    catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(`Failed to compile pivot template for value "${pivot.value}":`, e);
-        return pivot.value;
-    }
-};
-export default resolvePivotUrl;

package/components/elements/hit/related/PivotLink.js

@@ -1,93 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ErrorOutline } from '@mui/icons-material';
-import { Tooltip } from '@mui/material';
-import { useHelpers } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
-import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
-import PivotTooltip from '@cccsaurora/howler-ui/components/elements/hit/PivotTooltip';
-import Handlebars from 'handlebars';
-import { isEmpty } from 'lodash-es';
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { usePluginStore } from 'react-pluggable';
-import { flattenDeep } from '@cccsaurora/howler-ui/utils/utils';
-import RelatedLink from './RelatedLink';
-const PivotLink = ({ pivot, hit, compact = false, dossier, resolvedUrl }) => {
-    const { i18n } = useTranslation();
-    const helpers = useHelpers({ async: false, components: false });
-    const pluginStore = usePluginStore();
-    const handlebars = useMemo(() => Handlebars.create(), []);
-    const flatHit = useMemo(() => flattenDeep(hit ?? {}), [hit]);
-    const href = useMemo(() => {
-        if (!pivot || pivot.format !== 'link' || !flatHit || isEmpty(flatHit)) {
-            return '';
-        }
-        const templateObject = Object.fromEntries((pivot.mappings ?? []).map(mapping => {
-            const result = [mapping.key];
-            if (mapping.field === 'custom') {
-                result.push(mapping.custom_value);
-            }
-            else if (Array.isArray(flatHit[mapping.field])) {
-                result.push(flatHit[mapping.field][0]);
-            }
-            else {
-                result.push(flatHit[mapping.field]);
-            }
-            return result;
-        }));
-        helpers.forEach(helper => {
-            if (handlebars.helpers[helper.keyword]) {
-                return;
-            }
-            handlebars.registerHelper(helper.keyword, (...args) => {
-                // eslint-disable-next-line no-console
-                console.debug(`Running helper ${helper.keyword}`);
-                return helper.callback?.(...args);
-            });
-        });
-        try {
-            return handlebars.compile(pivot.value)(templateObject);
-        }
-        catch (e) {
-            // eslint-disable-next-line no-console
-            console.error(`Failed to compile pivot template for value "${pivot.value}":`, e);
-            return pivot.value;
-        }
-    }, [flatHit, pivot, handlebars, helpers]);
-    if (href) {
-        return (_jsx(RelatedLink, { title: pivot.label?.[i18n.language] ?? '', href: href, compact: compact, icon: pivot.icon, target: "_blank", rel: "noopener noreferrer", tooltip: _jsx(PivotTooltip, { dossier: dossier, resolvedUrl: resolvedUrl }) }));
-    }
-    // Hide a relatively useless console error, we'll show a UI component instead
-    // eslint-disable-next-line no-console
-    const oldError = console.error;
-    let pluginPivot = null;
-    try {
-        // eslint-disable-next-line no-console
-        console.error = () => { };
-        pluginPivot = pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact });
-    }
-    finally {
-        // eslint-disable-next-line no-console
-        console.error = oldError;
-    }
-    if (pluginPivot) {
-        return pluginPivot;
-    }
-    return (_jsx(HowlerCard, { sx: [
-            theme => ({
-                p: 0.75,
-                backgroundColor: 'transparent',
-                transition: theme.transitions.create(['border-color']),
-                '&:hover': { borderColor: 'error.main' }
-            }),
-            { border: 'thin solid', borderColor: 'transparent' }
-        ], children: _jsx(Tooltip, { title: _jsxs(_Fragment, { children: [_jsx("span", { children: `Missing Pivot Implementation ${pivot.format}` }), _jsx("code", { children: _jsx("pre", { children: JSON.stringify(pivot, null, 4) }) })] }), slotProps: {
-                popper: {
-                    sx: {
-                        '& > .MuiTooltip-tooltip': {
-                            maxWidth: '90vw !important'
-                        }
-                    }
-                }
-            }, children: _jsx(ErrorOutline, { color: "error" }) }) }));
-};
-export default PivotLink;