@cccsaurora/howler-ui 2.17.0-dev.420 → 2.17.0-dev.473

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

@@ -0,0 +1,21 @@
+import type { PivotFormProps } from '@cccsaurora/howler-ui/components/routes/dossiers/PivotForm';
+import { type FC } from 'react';
+/**
+ * CluePivotForm Component
+ *
+ * A form component that allows users to configure pivot operations for Clue actions.
+ * This component provides a dynamic form interface for selecting and configuring
+ * Clue actions with their associated parameters and field mappings.
+ *
+ * Key Features:
+ * - Action selection via autocomplete dropdown
+ * - Dynamic form generation based on action schemas
+ * - Field mapping configuration for hit indexes
+ * - Custom value support for non-standard fields
+ * - Integration with JsonForms for complex parameter handling
+ *
+ * @param props - Component props containing pivot data and update callback
+ * @returns JSX element representing the pivot configuration form
+ */
+declare const CluePivotForm: FC<PivotFormProps>;
+export default CluePivotForm;

package/plugins/clue/components/CluePivotForm.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useClueActionsSelector, useClueEnrichSelector } from '@cccsaurora/clue-ui';
+import { adaptSchema } from '@cccsaurora/clue-ui/components/actions/form/schemaAdapter';
+import { materialCells, materialRenderers } from '@jsonforms/material-renderers';
+import { JsonForms } from '@jsonforms/react';
+import { Autocomplete, createTheme, Divider, Stack, TextField, ThemeProvider, Typography, useTheme } from '@mui/material';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
+import { flatten, unflatten } from 'flat';
+import capitalize from 'lodash-es/capitalize';
+import cloneDeep from 'lodash-es/cloneDeep';
+import isBoolean from 'lodash-es/isBoolean';
+import isEqual from 'lodash-es/isEqual';
+import isPlainObject from 'lodash-es/isPlainObject';
+import merge from 'lodash-es/merge';
+import omitBy from 'lodash-es/omitBy';
+import pick from 'lodash-es/pick';
+import pickBy from 'lodash-es/pickBy';
+import { useCallback, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+/**
+ * Enhanced material renderers wrapped in ErrorBoundary components to prevent
+ * form rendering errors from crashing the entire application
+ */
+const WRAPPED_RENDERERS = materialRenderers.map(value => ({
+    ...value,
+    renderer: ({ ...props }) => (_jsx(ErrorBoundary, { children: _jsx(value.renderer, { ...props }) }))
+}));
+/**
+ * CluePivotForm Component
+ *
+ * A form component that allows users to configure pivot operations for Clue actions.
+ * This component provides a dynamic form interface for selecting and configuring
+ * Clue actions with their associated parameters and field mappings.
+ *
+ * Key Features:
+ * - Action selection via autocomplete dropdown
+ * - Dynamic form generation based on action schemas
+ * - Field mapping configuration for hit indexes
+ * - Custom value support for non-standard fields
+ * - Integration with JsonForms for complex parameter handling
+ *
+ * @param props - Component props containing pivot data and update callback
+ * @returns JSX element representing the pivot configuration form
+ */
+const CluePivotForm = ({ pivot, update }) => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    // Get available Clue actions from the global state
+    const actions = useClueActionsSelector(ctx => ctx?.availableActions);
+    const ready = useClueEnrichSelector(ctx => ctx.ready);
+    /**
+     * Generates a dynamic JSON schema for the selected action's parameters.
+     * This schema is used to render the form fields for action configuration.
+     *
+     * The function:
+     * 1. Retrieves the action definition based on the pivot value
+     * 2. Adapts the action's parameter schema using Clue's schema adapter
+     * 3. Enhances string properties with hit index enums for autocomplete
+     * 4. Applies any extra schema definitions from the action
+     */
+    const formSchema = useMemo(() => {
+        const value = pivot?.value;
+        // Return null if no action is selected or action doesn't exist
+        if (!value || !actions[value]) {
+            return null;
+        }
+        // Clone and adapt the action's parameter schema
+        const clueAdaptedSchema = cloneDeep({
+            ...adaptSchema(actions[value].params),
+            ...(actions[value].extra_schema ?? {})
+        });
+        // Enhance string properties with hit index options for better UX
+        Object.entries(clueAdaptedSchema.properties).forEach(([key, prop]) => {
+            // Handle boolean properties by converting to enum with hit indexes
+            if (typeof prop === 'boolean') {
+                clueAdaptedSchema.properties[key] = { enum: Object.keys(config.indexes.hit) };
+                return;
+            }
+            if (prop.type === 'array') {
+                if (isBoolean(prop.items)) {
+                    clueAdaptedSchema.properties[key] = { enum: Object.keys(config.indexes.hit) };
+                    return;
+                }
+                else if (!Array.isArray(prop.items)) {
+                    prop.type = prop.items.type;
+                    delete prop.items;
+                }
+            }
+            // Skip non-string properties
+            if (prop.type !== 'string' && (!Array.isArray(prop.type) || !prop.type.includes('string'))) {
+                return;
+            }
+            // Strip date-time format since we're picking from a list of fields
+            if (prop.format === 'date-time') {
+                delete prop.format;
+            }
+            // Add hit index options to string properties without existing enums
+            if (!prop.enum && !prop.oneOf) {
+                prop.enum = Object.keys(config.indexes.hit);
+            }
+        });
+        return clueAdaptedSchema;
+    }, [actions, config.indexes.hit, pivot?.value]);
+    /**
+     * Generates the UI schema for JsonForms based on the form schema.
+     * This defines the layout and rendering options for each form field.
+     *
+     * The UI schema:
+     * 1. Creates a vertical layout for all form elements
+     * 2. Sorts fields by custom order property or required status
+     * 3. Configures autocomplete for enum fields
+     * 4. Applies custom options and rules from the schema
+     */
+    const uiSchema = useMemo(() => ({
+        type: 'VerticalLayout',
+        elements: Object.entries(formSchema?.properties ?? {})
+            // Sort fields: first by custom order, then by required status
+            .sort(([a_key, a_ent], [b_key, b_ent]) => {
+            if (!!a_ent.order || !!b_ent.order) {
+                return a_ent.order - b_ent.order;
+            }
+            else {
+                // Required fields appear first
+                return +formSchema?.required.includes(a_key) - +formSchema?.required.includes(b_key);
+            }
+        })
+            .map(([key, value]) => ({
+            type: 'Control',
+            scope: `#/properties/${key}`,
+            options: {
+                // Enable autocomplete for fields with enum values
+                autocomplete: !!value.enum || !!value.oneOf,
+                showUnfocusedDescription: true,
+                // Apply any custom options from the schema
+                ...value.options
+            },
+            // Apply conditional rendering rules if present
+            rule: value.rule
+        }))
+    }), [formSchema?.properties, formSchema?.required]);
+    /**
+     * Handles updates to the selected action value.
+     * When an action is selected, this function:
+     * 1. Sets up default field mappings based on action requirements
+     * 2. Configures selector mappings for actions that don't accept empty inputs
+     * 3. Updates the pivot configuration
+     *
+     * @param value - The selected action identifier
+     */
+    const onUpdate = useCallback((value) => {
+        const mappings = [];
+        // TODO: Fix type hints and remove the any cast
+        // For actions that don't accept empty inputs, add selector mapping
+        if (!actions[value].accept_empty) {
+            // Use 'selectors' for multiple selection, 'selector' for single selection
+            mappings.push({
+                key: actions[value].accept_multiple ? 'selectors' : 'selector',
+                field: 'howler.id'
+            });
+        }
+        update({
+            value,
+            mappings
+        });
+    }, [actions, update]);
+    /**
+     * Transforms pivot mappings into form data format for JsonForms.
+     * Converts the mappings array into a key-value object where:
+     * - Key is the mapping key (e.g., 'selector', 'selectors')
+     * - Value is either the custom_value (if set) or the field name
+     */
+    const formData = useMemo(() => {
+        const rawData = Object.fromEntries((pivot?.mappings ?? []).map(mapping => {
+            const parameterSchema = actions[pivot.value]?.params?.properties?.[mapping.key];
+            const value = mapping.custom_value ?? mapping.field;
+            if (mapping.field === 'custom') {
+                if (parameterSchema?.type === 'number') {
+                    return [mapping.key, parseFloat(mapping.custom_value)];
+                }
+                if (parameterSchema?.type === 'integer') {
+                    return [mapping.key, Math.floor(parseFloat(mapping.custom_value))];
+                }
+                return [mapping.key, mapping.custom_value];
+            }
+            return [mapping.key, value];
+        }));
+        // JSONForms will inadvertently nest dicts
+        // (e.g. "abc1.field" key will result in)
+        // {
+        //   "abc1": {
+        //     "field"
+        //   }
+        // }
+        // Validation doesn't account for this, so we need to merge the flattened and unflattened dicts.
+        // This leads to awful side effects in the onChange function, detailed there.
+        return merge({}, rawData, unflatten(rawData));
+    }, [actions, pivot?.mappings, pivot.value]);
+    // Find the main selector mapping for special handling in the UI
+    const selectorMapping = pivot?.mappings?.find(_mapping => ['selector', 'selectors'].includes(_mapping.key));
+    return (_jsxs(ErrorBoundary, { children: [_jsx(Autocomplete, { fullWidth: true, disabled: !pivot || !ready, options: Object.entries(actions)
+                    .filter(([_key, definition]) => !!definition && definition.format === 'pivot')
+                    .map(([key]) => key), renderOption: ({ key, ...optionProps }, actionId) => {
+                    const definition = actions[actionId];
+                    return (_jsxs(Stack, { component: "li", ...optionProps, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "start", alignItems: "center", children: [_jsx(Typography, { children: definition.name }), _jsx("pre", { style: {
+                                            fontSize: '0.85rem',
+                                            border: `thin solid ${theme.palette.divider}`,
+                                            padding: theme.spacing(0.5),
+                                            borderRadius: theme.shape.borderRadius
+                                        }, children: actionId })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", alignSelf: "start", children: definition.summary })] }, key));
+                }, getOptionLabel: opt => actions[opt]?.name ?? '', renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: t('route.dossiers.manager.pivot.value') })), value: pivot?.value ?? '', onChange: (_ev, value) => onUpdate(value) }), _jsx(Divider, { flexItem: true }), _jsx(Typography, { children: t('route.dossiers.manager.pivot.mappings') }), selectorMapping && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { fullWidth: true, options: ['custom', ...Object.keys(config.indexes.hit)], renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: capitalize(selectorMapping.key), sx: { minWidth: '150px' } })), value: selectorMapping.field, onChange: (_ev, field) => update({
+                            mappings: pivot.mappings.map(_mapping => _mapping.key === selectorMapping.key ? { ..._mapping, field } : _mapping)
+                        }) }), selectorMapping.field === 'custom' && (_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.mapping.custom'), disabled: !pivot, value: selectorMapping?.custom_value ?? null, onChange: ev => update({
+                            mappings: pivot.mappings.map(_mapping => _mapping.key === selectorMapping.key ? { ..._mapping, custom_value: ev.target.value } : _mapping)
+                        }) }))] })), formSchema && (_jsx(ThemeProvider, { theme: _theme => createTheme({
+                    ..._theme,
+                    components: {
+                        MuiTextField: {
+                            defaultProps: { size: 'small' },
+                            styleOverrides: { root: { marginTop: theme.spacing(1) } }
+                        },
+                        MuiInputBase: {
+                            defaultProps: { size: 'small' }
+                        },
+                        MuiFormControl: {
+                            defaultProps: { size: 'small' },
+                            styleOverrides: {
+                                root: { marginTop: theme.spacing(1) }
+                            }
+                        }
+                    }
+                }), children: _jsx(ErrorBoundary, { children: _jsx(JsonForms, { schema: formSchema, uischema: uiSchema, renderers: WRAPPED_RENDERERS, cells: materialCells, data: formData, onChange: ({ data }) => {
+                            // We now need to remove the unflattened object we provided for validation to JSON forms
+                            // EXCEPT, new keys are added via nesting. So we need to flatten the nested data and overwrite it
+                            // with the flat data.
+                            const flatData = omitBy(data, isPlainObject);
+                            const nestedData = flatten(pickBy(data, isPlainObject));
+                            // Merge existing selector mappings with new form data. This is the crazy complexity I mentioned above.
+                            //
+                            // The full flow:
+                            // 1. A field mapping is chosen, e.g. 'key.1': 'howler.id'
+                            // 2. The data object has the structure {key: {1: 'howler.id'}}
+                            // 3. This is added to fullData via nestedData
+                            // 4. Another field mapping is chosen, e.g. 'key.2': 'howler.id'
+                            // 5. The data object now looks like: {key.1: 'howler.id', key: {1: 'howler.id', 2: 'howler.id'}}
+                            // 6. We integrate this again, but this time the existing `key.1` key overwrites
+                            //    the flattened `key: {1}` object.
+                            // 7. When 'key.1' is changed, the ROOT (flattened) key changes, but the outdated variant is still there.
+                            //    that is: {key.1: 'howler.status', key.2: 'howler.id', key: {1: 'howler.id', 2: 'howler.id'}}
+                            // 8. This is why the flat data is AFTER the nested data. So that the final, resolved object is:
+                            //    {key.1: 'howler.status', key.2: 'howler.id'}
+                            //
+                            // This is very confusing - ask Matt R if you need a better explanation.
+                            const fullData = { ...nestedData, ...flatData, ...pick(pivot.mappings, ['selector', 'selectors']) };
+                            // Convert form data back to mappings format
+                            const newMappings = Object.entries(fullData).map(([key, val]) => ({
+                                key,
+                                // Use 'custom' field type if value is not a standard hit index
+                                field: val in config.indexes.hit ? val : 'custom',
+                                // Store custom values separately from field names
+                                custom_value: val in config.indexes.hit ? null : val
+                            }));
+                            // Only update if mappings have actually changed (performance optimization)
+                            if (!isEqual(newMappings, pivot.mappings)) {
+                                update({ mappings: newMappings });
+                            }
+                        }, config: {} }) }) }))] }));
+};
+export default CluePivotForm;

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

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

package/plugins/clue/components/ClueTypography.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import EnrichedTypography from '@cccsaurora/clue-ui/components/EnrichedTypography';
+import { Typography } from '@mui/material';
+import { memo } from 'react';
+import { useType } from '../utils';
+const ClueTypography = ({ children, value, context, field, hit, ...props }) => {
+    const type = useType(hit, field, value);
+    if (!type) {
+        return _jsx(Typography, { ...props, children: children ?? value });
+    }
+    let enrichedProps = {
+        ...props,
+        value
+    };
+    if (context === 'banner') {
+        enrichedProps = {
+            ...enrichedProps,
+            slotProps: { stack: { component: 'span' } }
+        };
+    }
+    else if (context === 'outline') {
+        enrichedProps = {
+            ...enrichedProps,
+            hideLoading: true,
+            slotProps: {
+                stack: {
+                    sx: { mr: 'auto' },
+                    onClick: e => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }
+                },
+                popover: {
+                    onClick: e => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }
+                }
+            }
+        };
+    }
+    else if (context === 'table') {
+        enrichedProps = {
+            ...enrichedProps,
+            hideLoading: true,
+            slotProps: {
+                stack: { sx: { width: '100%', '& > p': { textOverflow: 'ellipsis', overflow: 'hidden' } } }
+            }
+        };
+    }
+    return _jsx(EnrichedTypography, { ...enrichedProps, type: type });
+};
+export default memo(ClueTypography);

package/plugins/clue/helpers.d.ts

@@ -0,0 +1,3 @@
+import type { HowlerHelper } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
+declare const HELPERS: HowlerHelper[];
+export default HELPERS;

package/plugins/clue/helpers.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable no-console */
+import EnrichedTypography, {} from '@cccsaurora/clue-ui/components/EnrichedTypography';
+import Fetcher from '@cccsaurora/clue-ui/components/fetchers/Fetcher';
+import Entry from '@cccsaurora/clue-ui/components/group/Entry';
+import Group from '@cccsaurora/clue-ui/components/group/Group';
+import { useClueEnrichSelector } from '@cccsaurora/clue-ui/hooks/selectors';
+import { Checkbox, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
+import i18nInstance from '@cccsaurora/howler-ui/i18n';
+import capitalize from 'lodash-es/capitalize';
+import groupBy from 'lodash-es/groupBy';
+import uniq from 'lodash-es/uniq';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const MarkdownTypography = ({ type, value, ...props }) => {
+    const { t } = useTranslation();
+    try {
+        const guessType = useClueEnrichSelector(ctx => ctx.guessType);
+        if (!type || type?.toString().toLowerCase() === 'guess') {
+            type = guessType(value.toString());
+        }
+        if (!type) {
+            return _jsx("span", { children: value });
+        }
+        return _jsx(EnrichedTypography, { ...props, type: type, value: value });
+    }
+    catch (err) {
+        return (_jsxs(Stack, { children: [_jsx("strong", { style: { color: 'red' }, children: t('markdown.error') }), _jsx("strong", { children: err.toString() }), _jsx("code", { style: { fontSize: '0.8rem' }, children: _jsx("pre", { children: err.stack }) })] }));
+    }
+};
+const ClueGroup = props => {
+    if (!props.enabled) {
+        return _jsx(_Fragment, { children: props.children });
+    }
+    if (!props.type) {
+        console.error('Missing required props for group helper');
+        return (_jsxs(Stack, { spacing: 1, children: [_jsx("strong", { style: { color: 'red' }, children: i18nInstance.t('markdown.error') }), _jsxs("code", { style: { fontSize: '0.8rem' }, children: [i18nInstance.t('markdown.props.missing'), ": type"] })] }));
+    }
+    return _jsx(Group, { type: props.type, children: props.children });
+};
+const ClueEntry = ({ value }) => {
+    const [checked, setChecked] = useState(false);
+    return (_jsx(Entry, { entry: value, selected: checked, children: _jsx(Paper, { sx: { p: 1 }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Checkbox, { checked: checked, onChange: (_event, _checked) => setChecked(_checked) }), _jsx(MarkdownTypography, { value: value }), _jsx(FlexOne, {})] }) }) }));
+};
+const ClueCheckbox = ({ value }) => {
+    const [checked, setChecked] = useState(false);
+    return (_jsx(Entry, { entry: value, selected: checked, children: _jsx(Checkbox, { checked: checked, onChange: (_event, _checked) => setChecked(_checked) }) }));
+};
+const HELPERS = [
+    {
+        keyword: 'clue',
+        documentation: {
+            en: 'Given a selector, this helper enriches the selector through clue.',
+            fr: 'Étant donné un sélecteur, cet assistant enrichit le sélecteur via clue.'
+        },
+        componentCallback: (type, value) => {
+            if (typeof type !== 'string' || typeof value !== 'string') {
+                return (_jsxs(Stack, { spacing: 1, children: [_jsx("strong", { style: { color: 'red' }, children: i18nInstance.t('markdown.error') }), _jsx("code", { style: { fontSize: '0.8rem' }, children: i18nInstance.t('markdown.helpers.clue.arguments') })] }));
+            }
+            return (_jsx(MarkdownTypography, { slotProps: { stack: { component: 'span', sx: { width: 'fit-content' } } }, component: "span", type: type, value: typeof value === 'string' ? value : null }));
+        }
+    },
+    {
+        keyword: 'fetcher',
+        documentation: {
+            en: 'Given a selector, this helper fetches data for the selector through clue.',
+            fr: 'Étant donné un sélecteur, cet assistant récupère les données pour le sélecteur via clue.'
+        },
+        componentCallback: (...args) => {
+            const options = args.pop();
+            const props = options?.hash ?? {};
+            if (!props.type || !props.value || !props.fetcherId) {
+                console.error('Missing required props for fetcher helper');
+                return (_jsxs(Stack, { spacing: 1, children: [_jsx("strong", { style: { color: 'red' }, children: i18nInstance.t('markdown.error') }), _jsxs("code", { style: { fontSize: '0.8rem' }, children: [i18nInstance.t('markdown.props.missing'), ":", ' ', ['type', 'value', 'fetcherId'].filter(key => !props[key]).join(', ')] })] }));
+            }
+            if (props.fetcherId.includes('eml')) {
+                props.fetcherId = props.fetcherId.replace('eml', 'email');
+            }
+            console.debug(`Rendering fetcher (${props.fetcherId}) for selector ${props.type}:${props.value}`);
+            return (_jsx(Fetcher, { slotProps: { stack: { component: 'span', sx: { width: 'fit-content' } } }, component: "span", ...props }));
+        }
+    },
+    {
+        keyword: 'clue_group',
+        documentation: {
+            en: 'Initializes a clue group',
+            fr: 'Initialise un groupe clue'
+        },
+        componentCallback: (values, ...args) => {
+            const options = args.pop();
+            const props = options?.hash ?? {};
+            const missing = [];
+            if (!Array.isArray(values)) {
+                missing.push('values');
+            }
+            if (!props.type) {
+                missing.push('type');
+            }
+            if (missing.length > 0) {
+                return (_jsxs(Stack, { spacing: 1, children: [_jsx("strong", { style: { color: 'red' }, children: i18nInstance.t('markdown.error') }), _jsxs("code", { style: { fontSize: '0.8rem' }, children: [i18nInstance.t('markdown.props.missing'), ": ", missing.join(', ')] })] }));
+            }
+            return (_jsx(ClueGroup, { type: props.type, enabled: true, children: _jsx(Stack, { spacing: 1, mt: 1, children: uniq(values).map(value => (_jsx(ClueEntry, { value: value }, value))) }) }));
+        }
+    },
+    {
+        keyword: 'clue_table',
+        documentation: {
+            en: `Render a table with optional Clue enrichments, fetchers and actions.
+
+Clue enrichments are performed for cells with a clue_type and no clue_fetcher.
+
+Clue fetchers are used for cells with a clue_type and a clue_fetcher.
+
+Clue actions are enabled by specifying a clue action type using the optional clue_action_type parameter. If enabled, cells with clue_entity==true will be selectable for use with Clue enrichments and actions, with a value of action_value if present, and otherwise value.
+
+Example:
+\`\`\`markdown
+{{curly 'clue_table clue_table_cells clue_action_type="ip"'}}
+\`\`\`
+where clue_table_cells is an array with properties:
+
+\`\`\`
+  column: string;
+  row: string;
+  value: string;
+  clue_type (optional): string;
+  clue_fetcher (optional): string;
+  fetcher_width (optional): string;
+  clue_entity (optional): boolean;
+  action_value (optional): string;
+\`\`\`
+    `,
+            fr: `Affiche un tableau avec des enrichissements, des extractions et des actions Clue optionnelles.
+
+Les enrichissements Clue sont effectués pour les cellules avec un clue_type et sans un clue_fetcher.
+
+Clue récupère les données pour le sélecteur pour les cellules avec un clue_type et un clue_fetcher.
+
+Les actions Clue sont activées en spécifiant un type d'action clue en utilisant le paramètre optionnel clue_action_type. Si activé, les cellules avec clue_entity==true seront sélectionnables pour utilisation avec les enrichissements et actions Clue, avec une valeur de action_value si présente, sinon la valeur.
+
+Exemple :
+\`\`\`markdown
+{{curly 'clue_table clue_table_cells clue_action_type="ip"'}}
+\`\`\`
+où clue_table_cells est un tableau avec les propriétés :
+
+\`\`\`
+  column: string;
+  row: string;
+  value: string;
+  clue_type (optionnel): string;
+  clue_fetcher (optionnel): string;
+  fetcher_width (optionnel): string;
+  clue_entity (optionnel): boolean;
+  action_value (optionnel): string;
+\`\`\`
+    `
+        },
+        componentCallback: (cells, ...args) => {
+            const options = args.pop();
+            const props = options?.hash ?? {};
+            const columns = Object.keys(groupBy(cells, 'column'));
+            const rows = groupBy(cells, 'row');
+            const clueActionType = props.clue_action_type;
+            const enableClueActions = !!clueActionType;
+            return (_jsx(Paper, { sx: { width: '95%', overflowX: 'auto', m: 1 }, children: _jsx(ClueGroup, { type: clueActionType, enabled: enableClueActions, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: columns.map(col => (_jsx(TableCell, { sx: { maxWidth: '150px' }, children: col
+                                            .split(/[_-]/)
+                                            .map(word => capitalize(word))
+                                            .join(' ') }, col))) }) }), _jsx(TableBody, { sx: { '& td': { wordBreak: 'break-word' } }, children: Object.entries(rows).map(([rowId, _cells]) => {
+                                    return (_jsx(TableRow, { children: columns.map(col => {
+                                            const cell = _cells.find(row => row.column === col);
+                                            if (!cell) {
+                                                return _jsx(TableCell, {}, col);
+                                            }
+                                            return (_jsxs(TableCell, { children: [enableClueActions && cell.clue_entity && (_jsx(ClueCheckbox, { value: cell.action_value ?? cell.value })), !!cell.clue_fetcher && !!cell.clue_type ? (_jsx(Fetcher, { slotProps: {
+                                                            image: { width: !!cell.fetcher_width ? cell.fetcher_width : 'fit-content' },
+                                                            stack: {
+                                                                component: 'span',
+                                                                sx: !!cell.fetcher_width
+                                                                    ? { width: cell.fetcher_width, display: 'block' }
+                                                                    : { width: 'fit-content' }
+                                                            }
+                                                        }, fetcherId: cell.clue_fetcher, value: cell.value, type: cell.clue_type })) : !!cell.clue_type ? (_jsx(MarkdownTypography, { slotProps: {
+                                                            stack: {
+                                                                component: 'span',
+                                                                sx: { width: 'fit-content' },
+                                                                display: 'inline-flex'
+                                                            }
+                                                        }, component: "span", type: cell.clue_type, value: cell.value })) : ((cell.value ?? 'N/A'))] }, col + cell.value));
+                                        }) }, rowId));
+                                }) })] }) }) }));
+        }
+    }
+];
+export default HELPERS;

package/plugins/clue/index.d.ts

@@ -0,0 +1,21 @@
+import type { HowlerHelper } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
+import type { PluginChipProps } from '@cccsaurora/howler-ui/components/elements/PluginChip';
+import type { PluginTypographyProps } from '@cccsaurora/howler-ui/components/elements/PluginTypography';
+import { type i18n as I18N } from 'i18next';
+import HowlerPlugin from '@cccsaurora/howler-ui/plugins/HowlerPlugin';
+declare class CluePlugin extends HowlerPlugin {
+    name: string;
+    version: string;
+    author: string;
+    description: string;
+    activate(): void;
+    provider(): import("react").FC<{
+        children?: import("react").ReactNode | undefined;
+    }>;
+    setup(): () => void;
+    localization(i18nInstance: I18N): void;
+    helpers(): HowlerHelper[];
+    typography(_props: PluginTypographyProps): import("react/jsx-runtime").JSX.Element;
+    chip(_props: PluginChipProps): import("react/jsx-runtime").JSX.Element;
+}
+export default CluePlugin;

package/plugins/clue/index.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Fetcher from '@cccsaurora/clue-ui/components/fetchers/Fetcher';
+import clueEN from '@cccsaurora/clue-ui/en/translation.json';
+import clueFR from '@cccsaurora/clue-ui/fr/translation.json';
+import { Box } from '@mui/material';
+import {} from 'i18next';
+import get from 'lodash-es/get';
+import HowlerPlugin from '@cccsaurora/howler-ui/plugins/HowlerPlugin';
+import ClueChip from './components/ClueChip';
+import ClueLeadForm from './components/ClueLeadForm';
+import CluePivot from './components/CluePivot';
+import CluePivotForm from './components/CluePivotForm';
+import ClueTypography from './components/ClueTypography';
+import HELPERS from './helpers';
+import howlerClueEN from './locales/clue.en.json';
+import howlerClueFR from './locales/clue.fr.json';
+import Provider from './Provider';
+import useSetup from './setup';
+class CluePlugin extends HowlerPlugin {
+    name = 'CluePlugin';
+    version = '0.0.1';
+    author = 'Matthew Rafuse <matthew.rafuse@cyber.gc.ca>';
+    description = 'This plugin enables clue enrichment in Howler.';
+    activate() {
+        super.activate();
+        const leadForm = props => _jsx(ClueLeadForm, { ...props });
+        const leadRenderer = (content, metadata, hit) => {
+            const parsedProps = JSON.parse(metadata);
+            const value = get(hit, parsedProps.value);
+            if (Array.isArray(value)) {
+                // TODO: Revisit handling for array values
+                parsedProps.value = value[0];
+            }
+            else {
+                parsedProps.value = value;
+            }
+            return (_jsx(Box, { p: 1, flex: 1, display: "flex", alignItems: "stretch", children: _jsx(Fetcher, { fetcherId: content, ...parsedProps }) }));
+        };
+        super.addLead('clue', leadForm, leadRenderer);
+        const pivotForm = (props) => _jsx(CluePivotForm, { ...props });
+        const pivotRenderer = (props) => _jsx(CluePivot, { ...props });
+        super.addPivot('clue', pivotForm, pivotRenderer);
+    }
+    provider() {
+        return Provider;
+    }
+    setup() {
+        return useSetup;
+    }
+    localization(i18nInstance) {
+        i18nInstance.addResourceBundle('en', 'clue', clueEN, true, true);
+        i18nInstance.addResourceBundle('fr', 'clue', clueFR, true, true);
+        i18nInstance.addResourceBundle('en', 'translation', howlerClueEN, true, false);
+        i18nInstance.addResourceBundle('fr', 'translation', howlerClueFR, true, false);
+    }
+    helpers() {
+        return HELPERS;
+    }
+    typography(_props) {
+        return _jsx(ClueTypography, { ..._props });
+    }
+    chip(_props) {
+        return _jsx(ClueChip, { ..._props });
+    }
+}
+export default CluePlugin;

package/plugins/clue/locales/clue.en.json

@@ -0,0 +1,8 @@
+{
+    "markdown.helpers.clue.arguments": "You must provide at least two arguments: type and value.",
+    "route.dossiers.manager.clue": "Clue Fetcher ID",
+    "route.dossiers.manager.clue.type": "Selector Type",
+    "route.dossiers.manager.clue.value": "Selector Value",
+    "route.dossiers.manager.clue.value.custom": "Custom Selector Value",
+    "route.dossiers.manager.clue.value.description": "You can use handlebars notation to insert fields from the corresponding alert (i.e. {{howler.id}})."
+}