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

package/components/routes/dossiers/PivotForm.js

@@ -2,15 +2,22 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Icon, iconExists } from '@iconify/react';
 import { Add, Delete, OpenInNew, Remove } from '@mui/icons-material';
 import { Alert, Autocomplete, Button, Divider, IconButton, Paper, Stack, Tab, Tabs, TextField, Typography, useTheme } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { isNil } from 'lodash-es';
 import merge from 'lodash-es/merge';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { Fragment, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
 import { useSearchParams } from 'react-router';
+import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import { notNil } from '@cccsaurora/howler-ui/utils/utils';
+import { pivotGroupValidation } from './utils';
+// Maximum number of group suggestions to request/display at once, mirroring the backend's own cap
+const MAX_GROUP_SUGGESTIONS = 10;
+// Minimum delay between group suggestion requests, so fast typing can't flood the backend
+const GROUP_SUGGESTION_THROTTLE_MS = 500;
 const LinkForm = ({ pivot, update }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
@@ -34,6 +41,9 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
     const pluginStore = usePluginStore();
     const [searchParams, setSearchParams] = useSearchParams();
     const [tab, setTab] = useState(parseInt(searchParams.get('pivot') ?? '0'));
+    const [groupOptions, setGroupOptions] = useState([]);
+    const groupThrottler = useMemo(() => new Throttler(GROUP_SUGGESTION_THROTTLE_MS), []);
+    const latestGroupRequest = useRef(0);
     const update = useCallback((data) => setDossier(_dossier => ({
         ..._dossier,
         pivots: (_dossier.pivots ?? [])
@@ -45,6 +55,9 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
                 return;
             }
             const merged = merge({}, pivot, data);
+            if (Object.hasOwn(data, 'group') && data.group === undefined) {
+                delete merged.group;
+            }
             if (data.mappings) {
                 merged.mappings = data.mappings;
             }
@@ -53,7 +66,7 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
             .filter(notNil)
     })), [setDossier, tab]);
     const pivot = useMemo(() => dossier.pivots?.[tab], [dossier.pivots, tab]);
-    const icon = useMemo(() => pivot?.icon ?? 'material-symbols:find-in-page', [pivot?.icon]);
+    const icon = useMemo(() => pivot?.icon ?? 'material-symbols:link', [pivot?.icon]);
     useEffect(() => {
         searchParams.delete('lead');
         if (searchParams.get('pivot') !== tab.toString()) {
@@ -62,6 +75,25 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
         setSearchParams(searchParams, { replace: true });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [setSearchParams, tab]);
+    // Validate the pivot's folder/group path to provide inline feedback before the dossier is saved.
+    const groupError = pivotGroupValidation(pivot?.group ?? '');
+    // Suggest existing group paths as the user types, throttled so we never issue more than one request per second
+    const fetchGroupSuggestions = useCallback((prefix) => {
+        const requestId = ++latestGroupRequest.current;
+        groupThrottler.debounce(async () => {
+            try {
+                const suggestions = await api.dossier.groups.get(prefix);
+                if (requestId === latestGroupRequest.current && suggestions) {
+                    setGroupOptions(suggestions.slice(0, MAX_GROUP_SUGGESTIONS));
+                }
+            }
+            catch {
+                if (requestId === latestGroupRequest.current) {
+                    setGroupOptions([]);
+                }
+            }
+        });
+    }, [groupThrottler]);
     return (_jsx(Paper, { sx: { p: 1, display: 'flex', flexDirection: 'column', flex: 1 }, id: "pivot-form", children: _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { direction: "row", children: [!dossier?.pivots || dossier.pivots.length < 1 ? (_jsx(Alert, { variant: "outlined", severity: "warning", sx: {
                                 mr: 1,
                                 px: 1,
@@ -82,10 +114,15 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
                                     ..._dossier,
                                     pivots: [
                                         ...(_dossier.pivots ?? []),
-                                        { icon: 'material-symbols:add-ad', label: { en: 'New Pivot', fr: 'Nouvelle pivot' }, mappings: [] }
+                                        { icon: 'material-symbols:link', label: { en: 'New Pivot', fr: 'Nouvelle pivot' }, mappings: [] }
                                     ]
                                 }));
-                            }, disabled: !dossier || loading, children: _jsx(Add, {}) })] }), _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", position: "relative", children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.icon'), value: icon, disabled: !pivot, fullWidth: true, error: !iconExists(icon), sx: { '& input': { paddingLeft: '2.25rem' } }, onChange: ev => update({ icon: ev.target.value }) }), _jsx(Icon, { fontSize: "1.75rem", icon: icon, style: { position: 'absolute', left: '0.5rem' } }), _jsx(Button, { variant: "outlined", color: "error", disabled: !pivot, sx: { minWidth: '0 !important', ml: 1 }, onClick: () => update(undefined), children: _jsx(Delete, {}) })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { mt: `${theme.spacing(0.5)} !important` }, children: [_jsx(Typography, { color: "text.secondary", children: t('route.dossiers.manager.icon.description') }), _jsx(IconButton, { size: "small", component: "a", href: "https://icon-sets.iconify.design/", children: _jsx(OpenInNew, { fontSize: "small" }) })] }), _jsxs(Stack, { direction: "row", spacing: 2, children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.label.en'), disabled: !pivot, value: pivot?.label?.en ?? '', fullWidth: true, onChange: ev => update({ label: { en: ev.target.value } }) }), _jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.label.fr'), disabled: !pivot, value: pivot?.label?.fr ?? '', fullWidth: true, onChange: ev => update({ label: { fr: ev.target.value } }) })] }), _jsx(Autocomplete, { disabled: !pivot, options: ['link', ...howlerPluginStore.pivotFormats], renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.pivot.format') })), value: pivot?.format ?? null, onChange: (_ev, format) => update({ format: format ?? undefined, value: '', mappings: [] }) }), !!pivot?.format &&
+                            }, disabled: !dossier || loading, children: _jsx(Add, {}) })] }), _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", position: "relative", children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.icon'), value: icon, disabled: !pivot, fullWidth: true, error: !iconExists(icon), sx: { '& input': { paddingLeft: '2.25rem' } }, onChange: ev => update({ icon: ev.target.value }) }), _jsx(Icon, { fontSize: "1.75rem", icon: icon, style: { position: 'absolute', left: '0.5rem' } }), _jsx(Button, { variant: "outlined", color: "error", disabled: !pivot, sx: { minWidth: '0 !important', ml: 1 }, onClick: () => update(undefined), children: _jsx(Delete, {}) })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { mt: `${theme.spacing(0.5)} !important` }, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.dossiers.manager.icon.description') }), _jsx(IconButton, { size: "small", component: "a", href: "https://icon-sets.iconify.design/", children: _jsx(OpenInNew, { sx: { fontSize: '12px' } }) })] }), _jsx(Autocomplete, { freeSolo: true, disableClearable: true, disabled: !dossier || loading, options: groupOptions, inputValue: pivot?.group ?? '', onInputChange: (_ev, value, reason) => {
+                                update({ group: value || undefined });
+                                if (reason === 'input') {
+                                    fetchGroupSuggestions(value);
+                                }
+                            }, renderInput: params => (_jsx(TextField, { ...params, id: "dossier-group", label: t('route.pivots.groups.label'), size: "small", fullWidth: true, error: !!groupError, onFocus: () => fetchGroupSuggestions(pivot?.group ?? '') })) }), _jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mt: `${theme.spacing(0.5)} !important` }, children: groupError ? t(groupError) : t('route.dossiers.pivot.explanation') }), _jsxs(Stack, { direction: "row", spacing: 2, children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.label.en'), disabled: !pivot, value: pivot?.label?.en ?? '', fullWidth: true, onChange: ev => update({ label: { en: ev.target.value } }) }), _jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.label.fr'), disabled: !pivot, value: pivot?.label?.fr ?? '', fullWidth: true, onChange: ev => update({ label: { fr: ev.target.value } }) })] }), _jsx(Autocomplete, { disabled: !pivot, options: ['link', ...howlerPluginStore.pivotFormats], renderInput: params => (_jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.pivot.format') })), value: pivot?.format ?? null, onChange: (_ev, format) => update({ format: format ?? undefined, value: '', mappings: [] }) }), !!pivot?.format &&
                             (pivot.format === 'link' ? (_jsx(LinkForm, { pivot: pivot, update: update })) : (pluginStore.executeFunction(`pivot.${pivot.format}.form`, { pivot, update })))] })] }) }));
 };
 export default PivotForm;

package/components/routes/dossiers/PivotForm.test.d.ts

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

package/components/routes/dossiers/PivotForm.test.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent, 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 { useState } from 'react';
+import { MemoryRouter } from 'react-router';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import PivotForm from './PivotForm';
+const mockGroupsGet = vi.hoisted(() => vi.fn());
+const mockExecuteFunction = vi.hoisted(() => vi.fn());
+vi.mock('api', () => ({
+    default: {
+        dossier: {
+            groups: {
+                get: mockGroupsGet
+            }
+        }
+    }
+}));
+vi.mock('@iconify/react', () => ({
+    Icon: ({ icon }) => _jsx("span", { "data-testid": "pivot-icon", children: icon }),
+    iconExists: (icon) => icon.startsWith('material-symbols:')
+}));
+vi.mock('plugins/store', () => ({
+    default: {
+        pivotFormats: []
+    }
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        i18n: { language: 'en' },
+        t: (key) => key
+    })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction: mockExecuteFunction })
+}));
+const basePivot = (overrides = {}) => ({
+    icon: 'material-symbols:link',
+    label: { en: 'Example', fr: 'Exemple' },
+    format: 'link',
+    value: 'https://example.test/{{id}}',
+    mappings: [],
+    ...overrides
+});
+const baseDossier = (pivot) => ({
+    dossier_id: 'dossier-1',
+    pivots: [pivot]
+});
+const renderForm = (pivot = basePivot(), loading = false) => {
+    const Wrapper = ({ children }) => {
+        const [dossier, setDossier] = useState(baseDossier(pivot));
+        return (_jsxs(ApiConfigContext.Provider, { value: {
+                config: { indexes: { hit: { 'howler.id': {}, 'event.domain': {} } } },
+                setConfig: vi.fn(),
+                loaded: true
+            }, children: [children, _jsx("output", { id: "dossier-state", children: JSON.stringify(dossier) }), _jsx(PivotForm, { dossier: dossier, setDossier: setDossier, loading: loading })] }));
+    };
+    return render(_jsx(MemoryRouter, { initialEntries: ['/dossiers/dossier-1/edit?pivot=0'], children: _jsx(Wrapper, {}) }));
+};
+describe('PivotForm', () => {
+    beforeEach(() => {
+        mockGroupsGet.mockReset();
+        mockExecuteFunction.mockReset();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('shows inline validation feedback for malformed groups and removes the group when cleared', async () => {
+        const user = userEvent.setup();
+        renderForm(basePivot({ group: 'network//dns' }));
+        const groupInput = screen.getByRole('combobox', { name: 'route.pivots.groups.label' });
+        expect(groupInput).toHaveValue('network//dns');
+        expect(groupInput).toHaveAttribute('aria-invalid', 'true');
+        expect(screen.getByText('route.dossiers.pivots.invalid.format')).toBeInTheDocument();
+        await user.clear(groupInput);
+        expect(groupInput).toHaveValue('');
+        expect(screen.getByText('route.dossiers.pivot.explanation')).toBeInTheDocument();
+        expect(screen.getByTestId('dossier-state')).not.toHaveTextContent('"group"');
+    });
+    it('loads at most ten group suggestions after the throttled request', async () => {
+        const user = userEvent.setup();
+        mockGroupsGet.mockResolvedValue(Array.from({ length: 12 }, (_, index) => `network/${index}`));
+        renderForm(basePivot({ group: 'network' }));
+        const groupInput = screen.getByRole('combobox', { name: 'route.pivots.groups.label' });
+        await user.click(groupInput);
+        await waitFor(() => {
+            expect(mockGroupsGet).toHaveBeenCalledWith('network');
+        }, { timeout: 3000 });
+        expect(await screen.findByRole('option', { name: 'network/0' })).toBeInTheDocument();
+        expect(screen.getAllByRole('option')).toHaveLength(10);
+        expect(screen.queryByRole('option', { name: 'network/10' })).not.toBeInTheDocument();
+    });
+    it('clears suggestions when the latest request fails', async () => {
+        mockGroupsGet.mockImplementation((prefix) => prefix === 'network' ? Promise.resolve(['network/dns']) : Promise.reject(new Error('request failed')));
+        renderForm();
+        const groupInput = screen.getByRole('combobox', { name: 'route.pivots.groups.label' });
+        fireEvent.change(groupInput, { target: { value: 'network' } });
+        await waitFor(() => {
+            expect(mockGroupsGet).toHaveBeenCalledWith('network');
+        }, { timeout: 3000 });
+        fireEvent.mouseDown(screen.getByTitle('Open'));
+        await waitFor(() => expect(screen.getByRole('option', { name: 'network/dns' })).toBeInTheDocument());
+        fireEvent.change(groupInput, { target: { value: 'other' } });
+        await waitFor(() => {
+            expect(mockGroupsGet).toHaveBeenLastCalledWith('other');
+        }, { timeout: 3000 });
+        await waitFor(() => expect(screen.queryByRole('option', { name: 'network/dns' })).not.toBeInTheDocument());
+    });
+    it('adds a link mapping and displays the custom value field when selected', async () => {
+        const user = userEvent.setup();
+        renderForm();
+        await user.click(screen.getByTestId('add-pivot'));
+        const mappingKey = screen.getByRole('textbox', { name: 'route.dossiers.manager.pivot.mapping.key' });
+        await user.clear(mappingKey);
+        await user.type(mappingKey, 'id');
+        const field = screen.getByRole('combobox', { name: 'route.dossiers.manager.pivot.mapping.field' });
+        await user.click(field);
+        await user.click(screen.getByRole('option', { name: 'custom' }));
+        const customValue = screen.getByRole('textbox', { name: 'route.dossiers.manager.pivot.mapping.custom' });
+        await user.type(customValue, 'fixed-value');
+        expect(screen.getByTestId('dossier-state')).toHaveTextContent('"key":"id"');
+        expect(screen.getByTestId('dossier-state')).toHaveTextContent('"field":"custom"');
+        expect(screen.getByTestId('dossier-state')).toHaveTextContent('"custom_value":"fixed-value"');
+    });
+});

package/components/routes/dossiers/utils.d.ts

@@ -0,0 +1,44 @@
+import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
+import type { Pivot } from '@cccsaurora/howler-ui/models/entities/generated/Pivot';
+export interface MenuPathNode {
+    path: string;
+    pivots?: DossierPivot[];
+    children?: MenuPathNode[];
+}
+export interface DossierPivot {
+    pivot: Pivot;
+    dossier: Dossier;
+}
+/**
+ * Validates a pivot group path using the same rules as the backend service.
+ *
+ * Rules:
+ * - Allows alphabetic characters (including supported accented letters), digits, and '/'.
+ * - Rejects malformed paths: consecutive '/', leading '/', or trailing '/'.
+ *
+ * @param group Requested pivot group path.
+ * @returns null when valid, otherwise the i18n error key describing the failure.
+ */
+export declare const pivotGroupValidation: (group: string) => string | undefined;
+/**
+ * Returns a stable menu key for a pivot within its dossier.
+ *
+ * Pivots currently attached to the dossier use their array index. Detached
+ * pivots receive an object-identity-based fallback key for the module lifetime.
+ *
+ * @param dossier Dossier containing the pivot, when it is attached.
+ * @param pivot Pivot for which to generate a key.
+ * @returns A dossier-scoped key suitable for identifying the pivot in the UI.
+ */
+export declare const getDossierPivotKey: (dossier: Dossier, pivot: Pivot) => string;
+/**
+ * Produces the final forest consumed by grouped pivot menus.
+ *
+ * Root-level pivots (no group path) are emitted as a node with an empty path,
+ * then grouped branches are appended from `buildPathMap`.
+ *
+ * @param dossiers Dossiers to convert into grouped pivot menu nodes.
+ * @param language Language used to sort labels inside each node.
+ * @returns Forest of menu nodes for hit-related pivot navigation.
+ */
+export declare const pivotForest: (dossiers: Dossier[], language?: 'en' | 'fr') => MenuPathNode[];

package/components/routes/dossiers/utils.js

@@ -0,0 +1,135 @@
+import { sortBy } from 'lodash-es';
+// Keep node-local pivots separate from user-defined group keys and Object.keys traversal.
+const PIVOTS = Symbol('pivots');
+/**
+ * Validates a pivot group path using the same rules as the backend service.
+ *
+ * Rules:
+ * - Allows alphabetic characters (including supported accented letters), digits, and '/'.
+ * - Rejects malformed paths: consecutive '/', leading '/', or trailing '/'.
+ *
+ * @param group Requested pivot group path.
+ * @returns null when valid, otherwise the i18n error key describing the failure.
+ */
+export const pivotGroupValidation = (group) => {
+    if (!group || group === '')
+        return;
+    // Only contain, French, English, numeral character as well as /.
+    if (!/^[0-9A-Za-zùûüÿàâæçéèêëïîôœÙÛÜŸÀÂÆÇÉÈÊËÏÎÔŒ/]*$/.test(group)) {
+        return 'route.dossiers.pivots.invalid.character';
+    }
+    // Protection against wrongly formated /. We need words inbetween and they should not start or end with a /.
+    if (group.includes('//') || group.startsWith('/') || group.endsWith('/')) {
+        return 'route.dossiers.pivots.invalid.format';
+    }
+};
+const detachedPivotKeys = new WeakMap();
+let nextDetachedPivotKey = 0;
+/**
+ * Returns a stable menu key for a pivot within its dossier.
+ *
+ * Pivots currently attached to the dossier use their array index. Detached
+ * pivots receive an object-identity-based fallback key for the module lifetime.
+ *
+ * @param dossier Dossier containing the pivot, when it is attached.
+ * @param pivot Pivot for which to generate a key.
+ * @returns A dossier-scoped key suitable for identifying the pivot in the UI.
+ */
+export const getDossierPivotKey = (dossier, pivot) => {
+    const pivotIndex = dossier.pivots?.indexOf(pivot) ?? -1;
+    if (pivotIndex >= 0) {
+        return `${dossier.dossier_id}:${pivotIndex}`;
+    }
+    let detachedPivotKey = detachedPivotKeys.get(pivot);
+    if (detachedPivotKey === undefined) {
+        detachedPivotKey = nextDetachedPivotKey++;
+        detachedPivotKeys.set(pivot, detachedPivotKey);
+    }
+    return `${dossier.dossier_id}:${detachedPivotKey}`;
+};
+/**
+ * Builds an intermediate tree keyed by each pivot group segment.
+ *
+ * Each slash-delimited segment in `pivot.group` creates or reuses a nested
+ * node, and pivots at that location are stored in an internal symbol-keyed array.
+ * This raw tree is later converted into `menuPathNode[]` for menu rendering.
+ *
+ * @param dossiers Dossiers whose pivots should be grouped.
+ * @returns A nested grouping tree where branch keys are path segments and
+ *          each node may contain a symbol-keyed pivot array.
+ */
+const getGroupPivot = (dossiers) => {
+    // no prototype: group segments are user-defined words (e.g. "constructor", "toString") and must not resolve to inherited Object.prototype keys
+    const groupPivot = Object.create(null);
+    dossiers.forEach(dossier => {
+        dossier.pivots?.forEach(pivot => {
+            let current = groupPivot;
+            // if we have a group we move the pointer to the proper location
+            if (pivot.group) {
+                pivot.group.split('/').forEach(groupSegment => {
+                    if (!(groupSegment in current)) {
+                        current[groupSegment] = Object.create(null);
+                    }
+                    current = current[groupSegment];
+                });
+            }
+            // Add the pivot to its location.
+            current[PIVOTS] ??= [];
+            current[PIVOTS].push({ pivot, dossier });
+        });
+    });
+    return groupPivot;
+};
+/**
+ * Converts the intermediate grouping tree into UI menu nodes.
+ *
+ * While traversing, non-branching chains with no local pivots are squashed
+ * into a single `path` label to avoid empty submenu levels in the UI.
+ *
+ * @param tree Intermediate tree from `getGroupPivot`.
+ * @param language Language used to sort pivot labels.
+ * @returns A menu node list ready for nested folder rendering.
+ */
+const buildPathMap = (tree, language = 'en') => {
+    const nodes = [];
+    for (const key of Object.keys(tree).sort()) {
+        let path = key;
+        let current = tree[key];
+        // squash a chain as long as it neither branches nor carries pivots of its own; that's a pure "pass-through"
+        // segment, so its name is folded into the path instead of forcing its own empty menu level
+        while (Object.keys(current).length === 1 && !current[PIVOTS]) {
+            const newKey = Object.keys(current)[0];
+            path = path + `/${newKey}`;
+            current = current[newKey];
+        }
+        nodes.push({
+            path: path,
+            pivots: sortBy(current[PIVOTS] ?? [], item => item.pivot.label?.[language]),
+            children: buildPathMap(current, language)
+        });
+    }
+    return nodes;
+};
+/**
+ * Produces the final forest consumed by grouped pivot menus.
+ *
+ * Root-level pivots (no group path) are emitted as a node with an empty path,
+ * then grouped branches are appended from `buildPathMap`.
+ *
+ * @param dossiers Dossiers to convert into grouped pivot menu nodes.
+ * @param language Language used to sort labels inside each node.
+ * @returns Forest of menu nodes for hit-related pivot navigation.
+ */
+export const pivotForest = (dossiers, language = 'en') => {
+    const group = getGroupPivot(dossiers);
+    const nodes = [];
+    if (group[PIVOTS]) {
+        nodes.push({
+            path: '',
+            pivots: sortBy(group[PIVOTS], item => item.pivot.label?.[language]),
+            children: []
+        });
+    }
+    nodes.push(...buildPathMap(group, language));
+    return nodes;
+};

package/components/routes/dossiers/utils.test.d.ts

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

package/components/routes/dossiers/utils.test.js

@@ -0,0 +1,168 @@
+import { describe, expect, it } from 'vitest';
+import { pivotForest, pivotGroupValidation } from './utils';
+describe('pivotGroupValidation', () => {
+    it('returns null for an empty string', () => {
+        expect(pivotGroupValidation('')).toBeUndefined();
+    });
+    it('returns null for undefined/null-like input', () => {
+        expect(pivotGroupValidation(undefined)).toBeUndefined();
+        expect(pivotGroupValidation(null)).toBeUndefined();
+    });
+    it('returns null for a valid single-level group', () => {
+        expect(pivotGroupValidation('network')).toBeUndefined();
+    });
+    it('returns null for a valid multi-level group', () => {
+        expect(pivotGroupValidation('network/dns/query')).toBeUndefined();
+    });
+    it('accepts accented characters', () => {
+        expect(pivotGroupValidation('réseauÙÛÜŸÀÂÆÇÉÈÊËÏÎÔŒ')).toBeUndefined();
+    });
+    it('accepts digits but still rejects other disallowed characters', () => {
+        expect(pivotGroupValidation('0')).toBeUndefined();
+        expect(pivotGroupValidation('network1')).toBeUndefined();
+        expect(pivotGroupValidation('net2work')).toBeUndefined();
+        expect(pivotGroupValidation('network/zone2')).toBeUndefined();
+        expect(pivotGroupValidation('network-dns')).toBe('route.dossiers.pivots.invalid.character');
+        expect(pivotGroupValidation('network_dns')).toBe('route.dossiers.pivots.invalid.character');
+    });
+    it('rejects consecutive slashes', () => {
+        expect(pivotGroupValidation('network//dns')).toBe('route.dossiers.pivots.invalid.format');
+    });
+    it('rejects a leading slash', () => {
+        expect(pivotGroupValidation('/network')).toBe('route.dossiers.pivots.invalid.format');
+    });
+    it('rejects a trailing slash', () => {
+        expect(pivotGroupValidation('network/')).toBe('route.dossiers.pivots.invalid.format');
+    });
+});
+const makePivot = (overrides = {}) => ({
+    value: 'value',
+    ...overrides
+});
+const makeDossier = (pivots) => ({
+    pivots
+});
+describe('pivotForest', () => {
+    it('returns an empty forest when there are no dossiers', () => {
+        expect(pivotForest([])).toEqual([]);
+    });
+    it('skips dossiers without pivots', () => {
+        expect(pivotForest([makeDossier(undefined)])).toEqual([]);
+    });
+    it('returns ungrouped pivots as a single root node with an empty path', () => {
+        const pivot = makePivot({ value: 'ungrouped' });
+        const dossier = makeDossier([pivot]);
+        expect(pivotForest([dossier])).toEqual([{ path: '', pivots: [{ pivot, dossier }], children: [] }]);
+    });
+    it('treats an empty string group the same as no group', () => {
+        const pivot = makePivot({ group: '' });
+        const dossier = makeDossier([pivot]);
+        expect(pivotForest([dossier])).toEqual([{ path: '', pivots: [{ pivot, dossier }], children: [] }]);
+    });
+    it('sorts root pivots by their label in the requested language', () => {
+        const pivotZ = makePivot({ label: { en: 'Zulu', fr: 'Alpha' } });
+        const pivotA = makePivot({ label: { en: 'Alpha', fr: 'Zulu' } });
+        const dossier = makeDossier([pivotZ, pivotA]);
+        expect(pivotForest([dossier], 'en')).toEqual([
+            {
+                path: '',
+                pivots: [
+                    { pivot: pivotA, dossier },
+                    { pivot: pivotZ, dossier }
+                ],
+                children: []
+            }
+        ]);
+    });
+    it('returns a node for a single-level group', () => {
+        const pivot = makePivot({ group: 'network' });
+        const dossier = makeDossier([pivot]);
+        expect(pivotForest([dossier])).toEqual([{ path: 'network', pivots: [{ pivot, dossier }], children: [] }]);
+    });
+    it('collapses an unbranched multi-level group path into a single node', () => {
+        const pivot = makePivot({ group: 'network/dns/query' });
+        const dossier = makeDossier([pivot]);
+        expect(pivotForest([dossier])).toEqual([{ path: 'network/dns/query', pivots: [{ pivot, dossier }], children: [] }]);
+    });
+    it('collapses repeated segment names the same as any other unbranched chain', () => {
+        const pivot = makePivot({ group: 'test/test' });
+        const dossier = makeDossier([pivot]);
+        expect(pivotForest([dossier])).toEqual([{ path: 'test/test', pivots: [{ pivot, dossier }], children: [] }]);
+    });
+    it('keeps all pivots sharing the same group on the same node', () => {
+        const pivotA = makePivot({ value: 'a', group: 'network' });
+        const pivotB = makePivot({ value: 'b', group: 'network' });
+        const dossierA = makeDossier([pivotA]);
+        const dossierB = makeDossier([pivotB]);
+        expect(pivotForest([dossierA, dossierB])).toEqual([
+            {
+                path: 'network',
+                pivots: [
+                    { pivot: pivotA, dossier: dossierA },
+                    { pivot: pivotB, dossier: dossierB }
+                ],
+                children: []
+            }
+        ]);
+    });
+    it('keeps grouped and ungrouped pivots from the same dossier as separate nodes', () => {
+        const grouped = makePivot({ value: 'grouped', group: 'network' });
+        const ungrouped = makePivot({ value: 'ungrouped' });
+        const dossier = makeDossier([grouped, ungrouped]);
+        expect(pivotForest([dossier])).toEqual([
+            { path: '', pivots: [{ pivot: ungrouped, dossier }], children: [] },
+            { path: 'network', pivots: [{ pivot: grouped, dossier }], children: [] }
+        ]);
+    });
+    it('branches sibling groups into children', () => {
+        const dnsPivot = makePivot({ value: 'dns', group: 'network/dns' });
+        const httpPivot = makePivot({ value: 'http', group: 'network/http' });
+        const dossier = makeDossier([dnsPivot, httpPivot]);
+        expect(pivotForest([dossier])).toEqual([
+            {
+                path: 'network',
+                pivots: [],
+                children: [
+                    { path: 'dns', pivots: [{ pivot: dnsPivot, dossier }], children: [] },
+                    { path: 'http', pivots: [{ pivot: httpPivot, dossier }], children: [] }
+                ]
+            }
+        ]);
+    });
+    it('keeps a branch point as its own node but still collapses each unbranched chain below it', () => {
+        const v4Pivot = makePivot({ value: 'v4', group: 'network/ip/v4/local' });
+        const v6Pivot = makePivot({ value: 'v6', group: 'network/ip/v6/local' });
+        const dossier = makeDossier([v4Pivot, v6Pivot]);
+        expect(pivotForest([dossier])).toEqual([
+            {
+                path: 'network/ip',
+                pivots: [],
+                children: [
+                    { path: 'v4/local', pivots: [{ pivot: v4Pivot, dossier }], children: [] },
+                    { path: 'v6/local', pivots: [{ pivot: v6Pivot, dossier }], children: [] }
+                ]
+            }
+        ]);
+    });
+    it('returns a node for each distinct top-level group, without merging them together', () => {
+        const networkPivot = makePivot({ value: 'network', group: 'network' });
+        const systemPivot = makePivot({ value: 'system', group: 'system' });
+        const dossier = makeDossier([networkPivot, systemPivot]);
+        expect(pivotForest([dossier])).toEqual([
+            { path: 'network', pivots: [{ pivot: networkPivot, dossier }], children: [] },
+            { path: 'system', pivots: [{ pivot: systemPivot, dossier }], children: [] }
+        ]);
+    });
+    it('keeps a group own pivots alongside a nested child branch, without collapsing', () => {
+        const parentPivot = makePivot({ value: 'parent', group: 'network' });
+        const childPivot = makePivot({ value: 'child', group: 'network/dns' });
+        const dossier = makeDossier([parentPivot, childPivot]);
+        expect(pivotForest([dossier])).toEqual([
+            {
+                path: 'network',
+                pivots: [{ pivot: parentPivot, dossier }],
+                children: [{ path: 'dns', pivots: [{ pivot: childPivot, dossier }], children: [] }]
+            }
+        ]);
+    });
+});

package/locales/en/translation.json

@@ -574,6 +574,7 @@
     "personalization.autohideappbar": "Auto Hide Topbar",
     "personalization.dark": "Dark Mode",
     "personalization.minimizebreadcrumbs": "Minimize Breadcrumbs",
+    "personalization.pivotGroup": "Group Pivot",
     "personalization.quicksearch": "Show Quick Search",
     "personalization.reset_text": "Reset to site defaults",
     "personalization.showbreadcrumbs": "Show Breadcrumbs",
@@ -756,6 +757,9 @@
     "route.dossiers.manager.validation.error.pivots.label.fr": "You have not configured a French pivot label.",
     "route.dossiers.manager.validation.error.pivots.value": "You have not set the value for the pivot '{{label}}'.",
     "route.dossiers.manager.validation.search": "You must search to validate your query before submitting.",
+    "route.dossiers.pivot.explanation": "Add a group value allowing this pivot to merge with other inside of the dossier buttons.",
+    "route.dossiers.pivots.invalid.character": "Group contain invalid character, only English, French and numeral splited with / are allowed",
+    "route.dossiers.pivots.invalid.format": "A group must consist of a relative path with no empty segments (e.g. a/b/c)",
     "route.dossiers.prompt": "Activate autocomplete using [ctrl + space].",
     "route.dossiers.search.prompt": "Search by title, query, or owner.",
     "route.dossiers.view": "View Dossier",
@@ -826,6 +830,7 @@
     "route.overviews.theme.dark": "Preview in Dark Mode",
     "route.overviews.theme.light": "Preview in Light Mode",
     "route.overviews.view": "View Overview",
+    "route.pivots.groups.label": "Pivot Group",
     "route.search": "Search",
     "route.templates": "Templates",
     "route.templates.analytic": "Choose Analytic",

package/locales/fr/translation.json

@@ -574,6 +574,7 @@
     "personalization.autohideappbar": "Masquer la barre supérieure",
     "personalization.dark": "Mode Sombre",
     "personalization.minimizebreadcrumbs": "Minimiser fils d'ariane",
+    "personalization.pivotGroup": "Grouper les Pivots",
     "personalization.quicksearch": "Afficher recherche rapide",
     "personalization.reset_text": "Réinitialiser les paramètres",
     "personalization.showbreadcrumbs": "Afficher fils d'ariane",
@@ -756,6 +757,9 @@
     "route.dossiers.manager.validation.error.pivots.label.fr": "Vous n'avez pas configuré d'étiquette de pivot en français.",
     "route.dossiers.manager.validation.error.pivots.value": "Vous n'avez pas défini la valeur pour le pivot '{{label}}'.",
     "route.dossiers.manager.validation.search": "Vous devez effectuer une recherche pour valider votre requête avant de la soumettre.",
+    "route.dossiers.pivot.explanation": "Ajouter un group a ce pivot pour permettre de fusionner avec d'autre bouttons sur les hits et alerts.",
+    "route.dossiers.pivots.invalid.character": "Le group contient des charactère invalide. Seulement les character Français, Anglais et numérale séparée par / sont acceptées",
+    "route.dossiers.pivots.invalid.format": "Un groupe doit être constitué d'un chemin relatif ne comportant aucun segment vide (par exemple : a/b/c)",
     "route.dossiers.prompt": "Activez l'autocomplétion en utilisant [ctrl + espace].",
     "route.dossiers.search.prompt": "Recherche par titre, requête ou propriétaire.",
     "route.dossiers.view": "Voir le dossier",
@@ -826,6 +830,7 @@
     "route.overviews.theme.dark": "Prévoyez en mode sombre",
     "route.overviews.theme.light": "Prévoyez en mode clair",
     "route.overviews.view": "Voir la vue d'ensemble",
+    "route.pivots.groups.label": "Group du pivot",
     "route.search": "Rechercher",
     "route.templates": "Modèles",
     "route.templates.analytic": "Choisir une analyse",

package/models/entities/generated/Pivot.d.ts

@@ -10,4 +10,5 @@ export interface Pivot {
   label?: Label;
   mappings?: Mapping[];
   value?: string;
+  group?: string;
 }