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

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}})."
+}

package/plugins/clue/locales/clue.fr.json

@@ -0,0 +1,8 @@
+{
+    "markdown.helpers.clue.arguments": "Vous devez fournir au moins deux arguments : type et valeur.",
+    "route.dossiers.manager.clue": "ID du sélecteur Clue",
+    "route.dossiers.manager.clue.type": "Type de sélecteur",
+    "route.dossiers.manager.clue.value": "Valeur du sélecteur",
+    "route.dossiers.manager.clue.value.custom": "Valeur du sélecteur personnalisé",
+    "route.dossiers.manager.clue.value.description": "Vous pouvez utiliser la notation « handlebars » pour insérer des champs à partir de l'alerte correspondante (c'est-à-dire {{howler.id}})."
+}

package/plugins/clue/setup.d.ts

@@ -0,0 +1,2 @@
+declare const useSetup: () => void;
+export default useSetup;

package/plugins/clue/setup.js

@@ -0,0 +1,46 @@
+import { SNACKBAR_EVENT_ID } from '@cccsaurora/clue-ui/data/event';
+import useClue from '@cccsaurora/clue-ui/hooks/useClue';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks/useAppUser';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import { useContext, useEffect } from 'react';
+const useSetup = () => {
+    const clue = useClue();
+    const appUser = useAppUser();
+    const { config } = useContext(ApiConfigContext);
+    const { showSuccessMessage, showErrorMessage, showInfoMessage, showWarningMessage } = useMySnackbar();
+    const features = config.configuration?.features ?? {};
+    useEffect(() => {
+        // eslint-disable-next-line no-console
+        console.debug('Initializing clue snackbar event handler');
+        const handleMessage = (event) => {
+            const { detail } = event;
+            if (detail.level === 'success') {
+                showSuccessMessage(detail.message, detail.timeout, detail.options);
+            }
+            else if (detail.level === 'error') {
+                showErrorMessage(detail.message, detail.timeout, detail.options);
+            }
+            else if (detail.level === 'info') {
+                showInfoMessage(detail.message, detail.timeout, detail.options);
+            }
+            else if (detail.level === 'warning') {
+                showWarningMessage(detail.message, detail.timeout, detail.options);
+            }
+        };
+        window.addEventListener(SNACKBAR_EVENT_ID, handleMessage);
+        return () => {
+            window.removeEventListener(SNACKBAR_EVENT_ID, handleMessage);
+        };
+    }, [showErrorMessage, showInfoMessage, showSuccessMessage, showWarningMessage]);
+    useEffect(() => {
+        if (!appUser.isReady()) {
+            return;
+        }
+        if (features.borealis || features.clue) {
+            clue.setReady(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [features, appUser.isReady()]);
+};
+export default useSetup;

package/plugins/clue/utils.d.ts

@@ -0,0 +1,2 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+export declare const useType: (hit?: Hit, field?: string, value?: string) => any;

package/plugins/clue/utils.js

@@ -0,0 +1,19 @@
+import { useClueEnrichSelector } from '@cccsaurora/clue-ui';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { useContext } from 'react';
+export const useType = (hit, field, value) => {
+    const guessType = useClueEnrichSelector(ctx => ctx.guessType);
+    const { config } = useContext(ApiConfigContext);
+    const typeFromHit = hit?.clue?.types?.find(mapping => mapping.field === field)?.type;
+    if (typeFromHit) {
+        return typeFromHit;
+    }
+    const typeFromConfig = config.configuration?.mapping?.[field];
+    if (typeFromConfig) {
+        return typeFromConfig;
+    }
+    if (value) {
+        return guessType(value.toString());
+    }
+    return null;
+};

package/plugins/store.js

@@ -24,6 +24,9 @@ class HowlerPluginStore {
     _routes = [];
     _sitemaps = [];
     install(plugin) {
+        if (this.plugins.includes(plugin.name)) {
+            return;
+        }
         console.log(`Installing plugin ${plugin.getPluginName()} by ${plugin.author}`);
         this.plugins.push(plugin.name);
         this.pluginStore.install(plugin);