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

package/components/elements/hit/related/pivots/PivotFolderMenu.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Folder, KeyboardArrowDown } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import { useId, useState } from 'react';
+import PivotFlyout from './PivotFlyout';
+import PivotFlyoutContent from './PivotFlyoutContent';
+import { useHoverMenu } from './utils';
+const PivotFolderMenu = ({ node, hit }) => {
+    const { isOpen, shouldFocusMenu, openMenu, cancelClose, scheduleClose, closeMenu } = useHoverMenu();
+    const menuId = useId();
+    const [rowElement, setRowElement] = useState(null);
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            closeMenu();
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            openMenu(true);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: setRowElement, variant: "outlined", startIcon: _jsx(Folder, {}), endIcon: _jsx(KeyboardArrowDown, {}), "aria-haspopup": "menu", "aria-controls": isOpen ? menuId : undefined, "aria-expanded": isOpen, onClick: event => openMenu(event.detail === 0), onKeyDown: onKeyDown, onMouseEnter: () => openMenu(), onMouseLeave: () => scheduleClose(), sx: theme => ({
+                    color: 'text.primary',
+                    textTransform: 'none',
+                    backgroundColor: 'transparent',
+                    borderColor: 'divider',
+                    transition: theme.transitions.create(['border-color', 'color']),
+                    '&:hover': {
+                        borderColor: 'primary.main',
+                        color: 'primary.main'
+                    }
+                }), children: node.path }), _jsx(PivotFlyout, { id: menuId, anchorEl: rowElement, focusOnOpen: shouldFocusMenu, open: isOpen, placement: "bottom-start", onClose: () => {
+                    closeMenu();
+                    rowElement?.focus();
+                }, onMouseEnter: cancelClose, onMouseLeave: () => scheduleClose(), children: _jsx(PivotFlyoutContent, { pivots: node.pivots ?? [], groups: node.children ?? [], hit: hit, onMenuEnter: cancelClose, onNavigate: closeMenu }) })] }));
+};
+export default PivotFolderMenu;

package/components/elements/hit/related/pivots/PivotFolderMenu.test.d.ts

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

package/components/elements/hit/related/pivots/PivotFolderMenu.test.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import PivotFolderMenu from './PivotFolderMenu';
+vi.mock('@iconify/react', () => ({
+    Icon: () => _jsx("span", {})
+}));
+vi.mock('components/elements/hit/related/pivots/PivotLink', () => ({
+    default: ({ pivot, variant }) => pivot.format === 'link' ? (_jsx("a", { href: `https://example.test/${pivot.value}`, role: variant === 'menu-item' ? 'menuitem' : undefined, children: pivot.label?.en })) : (_jsx("button", { type: "button", role: variant === 'menu-item' ? 'menuitem' : undefined, onClick: event => event.stopPropagation(), children: pivot.label?.en }))
+}));
+const dossier = { dossier_id: 'dossier-1' };
+const mainPivot = { format: 'link', value: 'main', label: { en: 'Main', fr: 'Principal' } };
+const nestedPivot = { format: 'link', value: 'nested', label: { en: 'Nested', fr: 'Imbrique' } };
+const pluginPivot = { format: 'clue', value: 'plugin', label: { en: 'Plugin', fr: 'Extension' } };
+const node = {
+    path: 'example',
+    pivots: [
+        { pivot: mainPivot, dossier },
+        { pivot: nestedPivot, dossier }
+    ],
+    children: []
+};
+describe('PivotFolderMenu', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+    it('opens a grouped pivot menu with the keyboard', async () => {
+        const user = userEvent.setup();
+        render(_jsx(PivotFolderMenu, { node: node }));
+        const trigger = screen.getByRole('button', { name: /example/i });
+        expect(trigger).toHaveAttribute('aria-expanded', 'false');
+        await user.tab();
+        expect(trigger).toHaveFocus();
+        await user.keyboard('{Enter}');
+        const link = await screen.findByRole('menuitem', { name: 'Nested' });
+        expect(link).toHaveAttribute('href', 'https://example.test/nested');
+        expect(trigger).toHaveAttribute('aria-expanded', 'true');
+        await user.keyboard('{Escape}');
+        expect(trigger).toHaveAttribute('aria-expanded', 'false');
+        expect(trigger).toHaveFocus();
+    });
+    it('leaves plugin pivot activation under the plugin control', async () => {
+        const user = userEvent.setup();
+        const open = vi.spyOn(window, 'open').mockReturnValue(null);
+        const pluginNode = {
+            ...node,
+            pivots: [node.pivots[0], { pivot: pluginPivot, dossier }]
+        };
+        render(_jsx(PivotFolderMenu, { node: pluginNode }));
+        await user.click(screen.getByRole('button', { name: /example/i }));
+        await user.click(await screen.findByRole('menuitem', { name: 'Plugin' }));
+        expect(open).not.toHaveBeenCalled();
+        expect(screen.getByRole('menuitem', { name: 'Plugin' })).toBeInTheDocument();
+    });
+});

package/components/elements/hit/related/{PivotLink.d.ts → pivots/PivotLink.d.ts}

@@ -3,11 +3,18 @@ import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { Pivot } from '@cccsaurora/howler-ui/models/entities/generated/Pivot';
 import { type FC } from 'react';
 export interface PivotLinkProps {
+    /** Pivot definition used to build the link or plugin rendering. */
     pivot: Pivot;
-    hit: Hit;
+    /** Hit whose data may be used to resolve a dynamic pivot URL. */
+    hit?: Hit;
+    /** Uses the compact related-link presentation. */
     compact?: boolean;
+    /** Dossier associated with the pivot. */
     dossier: Dossier;
-    resolvedUrl: string;
+    /** Presentation used for the pivot: a card or a menu item. */
+    variant?: 'card' | 'menu-item';
+    /** Called after navigation is requested. */
+    onNavigate?: () => void;
 }
 declare const PivotLink: FC<PivotLinkProps>;
 export default PivotLink;

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

@@ -0,0 +1,53 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorOutline } from '@mui/icons-material';
+import { Box, Tooltip, Typography } from '@mui/material';
+import { useHelpers } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
+import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import PivotTooltip from '@cccsaurora/howler-ui/components/elements/hit/PivotTooltip';
+import { resolvePivotUrl } from '@cccsaurora/howler-ui/components/elements/hit/related/pivots/utils';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+import RelatedLink from '../RelatedLink';
+const PivotLink = ({ pivot, hit, compact = false, dossier, variant = 'card', onNavigate }) => {
+    const { i18n } = useTranslation();
+    const helpers = useHelpers({ async: false, components: false });
+    const pluginStore = usePluginStore();
+    const resolvedUrl = useMemo(() => pivot.format === 'link'
+        ? resolvePivotUrl(pivot, hit, helpers) || `/dossier/${dossier.dossier_id}`
+        : `/dossier/${dossier.dossier_id}`, [dossier.dossier_id, helpers, hit, pivot]);
+    if (pivot.format === 'link') {
+        return (_jsx(RelatedLink, { title: pivot.label?.[i18n.language] ?? pivot.value ?? '', href: resolvedUrl, icon: pivot.icon, target: "_blank", rel: "noopener noreferrer", compact: compact, dense: variant === 'menu-item', secondary: variant === 'menu-item' ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "caption", display: "block", color: "text.secondary", noWrap: true, children: [dossier.title, dossier.owner].filter(Boolean).join(' • ') }), _jsx(Typography, { variant: "caption", display: "block", color: "text.secondary", noWrap: true, sx: { maxWidth: 260 }, children: resolvedUrl })] })) : undefined, tooltip: variant === 'menu-item' ? undefined : _jsx(PivotTooltip, { dossier: dossier, resolvedUrl: resolvedUrl }), menuItem: variant === 'menu-item', onNavigate: onNavigate }));
+    }
+    const pluginPivot = howlerPluginStore.pivotFormats.includes(pivot.format ?? '')
+        ? pluginStore.executeFunction(`pivot.${pivot.format}`, { pivot, hit, compact, variant, onNavigate })
+        : null;
+    if (pluginPivot) {
+        if (variant === 'menu-item') {
+            return pluginPivot;
+        }
+        return (_jsx(Tooltip, { title: _jsx(PivotTooltip, { dossier: dossier, resolvedUrl: resolvedUrl }), children: _jsx(Box, { component: "span", sx: { display: 'inline-flex' }, children: pluginPivot }) }));
+    }
+    if (variant === 'menu-item') {
+        return (_jsxs(Box, { role: "menuitem", "aria-disabled": "true", tabIndex: -1, sx: { display: 'flex', alignItems: 'center', gap: 1, px: 1, py: 0.5 }, children: [_jsx(ErrorOutline, { color: "error", fontSize: "small" }), _jsx(Typography, { noWrap: true, children: `Missing Pivot Implementation ${pivot.format}` })] }));
+    }
+    return (_jsx(HowlerCard, { sx: [
+            theme => ({
+                p: 0.75,
+                backgroundColor: 'transparent',
+                transition: theme.transitions.create(['border-color']),
+                '&:hover': { borderColor: 'error.main' }
+            }),
+            { border: 'thin solid', borderColor: 'transparent' }
+        ], children: _jsx(Tooltip, { title: _jsxs(_Fragment, { children: [_jsx("span", { children: `Missing Pivot Implementation ${pivot.format}` }), _jsx("code", { children: _jsx("pre", { children: JSON.stringify(pivot, null, 4) }) })] }), slotProps: {
+                popper: {
+                    sx: {
+                        '& > .MuiTooltip-tooltip': {
+                            maxWidth: '90vw !important'
+                        }
+                    }
+                }
+            }, children: _jsx(ErrorOutline, { color: "error" }) }) }));
+};
+export default PivotLink;

package/components/elements/hit/related/pivots/PivotLink.test.d.ts

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

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

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import PivotLink from './PivotLink';
+const executeFunction = vi.hoisted(() => vi.fn());
+vi.mock('@iconify/react', () => ({
+    Icon: ({ icon }) => _jsx("span", { id: "icon", "data-icon": icon })
+}));
+vi.mock('components/elements/display/handlebars/helpers', () => ({
+    useHelpers: () => [
+        {
+            keyword: 'upper',
+            callback: (...args) => String(args[0]).toUpperCase()
+        }
+    ]
+}));
+vi.mock('components/elements/display/HowlerCard', () => ({
+    default: ({ children }) => _jsx("div", { id: "howler-card", children: children })
+}));
+vi.mock('components/elements/hit/PivotTooltip', () => ({
+    default: () => _jsx("span", { "data-testid": "pivot-tooltip" })
+}));
+vi.mock('components/elements/hit/related/RelatedLink', () => ({
+    default: ({ title, href, target, rel, dense, secondary, action }) => (_jsxs("div", { id: "related-link", "data-dense": String(dense), children: [_jsx("a", { href: href, target: target, rel: rel, children: title }), secondary, action] }))
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        i18n: { language: 'en' },
+        t: (key) => key
+    })
+}));
+vi.mock('react-pluggable', () => ({
+    usePluginStore: () => ({ executeFunction })
+}));
+vi.mock('plugins/store', () => ({
+    default: { pivotFormats: ['clue'] }
+}));
+const hit = {
+    __index: 'hit',
+    timestamp: '2026-01-01T00:00:00Z',
+    howler: {},
+    event: { domain: ['example.test'] },
+    user: { name: 'alice' }
+};
+const dossier = {
+    dossier_id: 'dossier-1',
+    title: 'Example dossier',
+    owner: 'analyst',
+    query: 'foo bar'
+};
+const linkPivot = {
+    format: 'link',
+    label: { en: 'Open result' },
+    value: 'https://example.test/{{domain}}/{{token}}/{{upper user}}',
+    mappings: [
+        { key: 'domain', field: 'event.domain' },
+        { key: 'token', field: 'custom', custom_value: 'fixed-token' },
+        { key: 'user', field: 'user.name' }
+    ]
+};
+const renderPivotLink = (pivot, options = {}) => render(_jsx(MemoryRouter, { children: _jsx(PivotLink, { pivot: pivot, hit: hit, dossier: dossier, ...options }) }));
+describe('PivotLink', () => {
+    beforeEach(() => {
+        executeFunction.mockReset();
+        executeFunction.mockReturnValue(null);
+    });
+    it('resolves mapped hit values, custom values, and helpers in a link pivot', () => {
+        renderPivotLink(linkPivot, { compact: true });
+        const link = screen.getByRole('link', { name: 'Open result' });
+        expect(link).toHaveAttribute('href', 'https://example.test/example.test/fixed-token/ALICE');
+        expect(link).toHaveAttribute('target', '_blank');
+        expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+        expect(screen.getByTestId('related-link')).toHaveAttribute('data-dense', 'false');
+        expect(executeFunction).not.toHaveBeenCalled();
+    });
+    it('renders dossier details for menu-item link pivots', () => {
+        renderPivotLink(linkPivot, { variant: 'menu-item' });
+        expect(screen.getByTestId('related-link')).toHaveAttribute('data-dense', 'true');
+        expect(screen.getByText('Example dossier • analyst')).toBeInTheDocument();
+        expect(screen.getByText('https://example.test/example.test/fixed-token/ALICE')).toBeInTheDocument();
+        expect(screen.queryByRole('link', { name: 'pivot.dossier.open' })).not.toBeInTheDocument();
+    });
+    it('falls back to the dossier when a link pivot cannot resolve without a hit', () => {
+        const pivot = {
+            format: 'link',
+            label: { en: 'Open dossier' },
+            value: '{{domain}}',
+            mappings: [{ key: 'domain', field: 'event.domain' }]
+        };
+        render(_jsx(MemoryRouter, { children: _jsx(PivotLink, { pivot: pivot, dossier: dossier }) }));
+        expect(screen.getByRole('link', { name: 'Open dossier' })).toHaveAttribute('href', '/dossier/dossier-1');
+    });
+    it('renders a plugin-provided pivot implementation', () => {
+        const pluginPivot = _jsx("button", { type: "button", children: "Plugin pivot" });
+        executeFunction.mockReturnValue(pluginPivot);
+        const pivot = { format: 'clue', value: 'plugin-value' };
+        renderPivotLink(pivot, { compact: true });
+        expect(screen.getByRole('button', { name: 'Plugin pivot' })).toBeInTheDocument();
+        expect(executeFunction).toHaveBeenCalledWith('pivot.clue', {
+            pivot,
+            hit,
+            compact: true,
+            variant: 'card',
+            onNavigate: undefined
+        });
+        expect(screen.queryByTestId('related-link')).not.toBeInTheDocument();
+    });
+    it('renders an error indicator when no pivot implementation is available', () => {
+        const pivot = { format: 'unsupported', value: 'unsupported-value' };
+        renderPivotLink(pivot);
+        expect(screen.getByTestId('howler-card')).toBeInTheDocument();
+        expect(document.querySelector('[data-testid="ErrorOutlineIcon"]')).toBeInTheDocument();
+        expect(screen.queryByTestId('related-link')).not.toBeInTheDocument();
+        expect(executeFunction).not.toHaveBeenCalled();
+    });
+});

package/components/elements/hit/related/pivots/types.d.ts

@@ -0,0 +1,29 @@
+import type { DossierPivot, MenuPathNode } from 'components/routes/dossiers/utils';
+import type { Hit } from 'models/entities/generated/Hit';
+
+/** Shared props for pivot navigation components. */
+export interface PivotSharedProps {
+  /** Hit whose data may be used by pivot links. */
+  hit?: Hit;
+
+  /** Keeps a parent menu open while the pointer is inside it. */
+  onMenuEnter?: () => void;
+
+  /** Called when navigating to a pivot. */
+  onNavigate?: () => void;
+}
+
+/** Props for the root pivot folder menu. */
+export interface PivotFolderMenuProps extends PivotSharedProps {
+  /** Folder node represented by the menu. */
+  node: MenuPathNode;
+}
+
+/** Props for the contents of a pivot flyout menu. */
+export interface PivotFlyoutContentProps extends PivotSharedProps {
+  /** Pivots rendered at the current menu level. */
+  pivots: DossierPivot[];
+
+  /** Child folder groups rendered as nested menus. */
+  groups: MenuPathNode[];
+}

package/components/elements/hit/related/pivots/utils.d.ts

@@ -0,0 +1,12 @@
+import type { HowlerHelper } from '@cccsaurora/howler-ui/components/elements/display/handlebars/helpers';
+import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+export declare const useHoverMenu: () => {
+    isOpen: boolean;
+    shouldFocusMenu: boolean;
+    openMenu: (focusMenu?: boolean) => void;
+    cancelClose: () => void;
+    scheduleClose: (delay?: number) => void;
+    closeMenu: () => void;
+};
+export declare const resolvePivotUrl: (pivot: NonNullable<Dossier['pivots']>[number], currentHit?: Hit, helpers?: HowlerHelper[]) => string;

package/components/elements/hit/related/pivots/utils.js

@@ -0,0 +1,51 @@
+import Handlebars from 'handlebars';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { flattenDeep } from '@cccsaurora/howler-ui/utils/utils';
+const CLOSE_DELAY = 200;
+export const useHoverMenu = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [shouldFocusMenu, setShouldFocusMenu] = useState(false);
+    const closeTimer = useRef(undefined);
+    useEffect(() => () => clearTimeout(closeTimer.current), []);
+    const openMenu = useCallback((focusMenu = false) => {
+        clearTimeout(closeTimer.current);
+        setShouldFocusMenu(focusMenu);
+        setIsOpen(true);
+    }, []);
+    const cancelClose = useCallback(() => clearTimeout(closeTimer.current), []);
+    const scheduleClose = useCallback((delay = CLOSE_DELAY) => {
+        clearTimeout(closeTimer.current);
+        closeTimer.current = setTimeout(() => setIsOpen(false), delay);
+    }, []);
+    const closeMenu = useCallback(() => {
+        clearTimeout(closeTimer.current);
+        setShouldFocusMenu(false);
+        setIsOpen(false);
+    }, []);
+    return { isOpen, shouldFocusMenu, openMenu, cancelClose, scheduleClose, closeMenu };
+};
+export const resolvePivotUrl = (pivot, currentHit, helpers = []) => {
+    const flatHit = flattenDeep(currentHit ?? {});
+    const handlebars = Handlebars.create();
+    helpers.forEach(helper => {
+        if (helper.callback && !handlebars.helpers[helper.keyword]) {
+            handlebars.registerHelper(helper.keyword, helper.callback);
+        }
+    });
+    const templateObject = Object.fromEntries((pivot.mappings ?? []).map(mapping => {
+        const value = mapping.field === 'custom'
+            ? mapping.custom_value
+            : Array.isArray(flatHit[mapping.field])
+                ? flatHit[mapping.field][0]
+                : flatHit[mapping.field];
+        return [mapping.key, value];
+    }));
+    try {
+        return handlebars.compile(pivot.value)(templateObject);
+    }
+    catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(`Failed to compile pivot template for value "${pivot.value}":`, e);
+        return pivot.value;
+    }
+};

package/components/elements/hit/related/pivots/utils.test.d.ts

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

package/components/elements/hit/related/pivots/utils.test.js

@@ -0,0 +1,30 @@
+import { describe, expect, it, vi } from 'vitest';
+import { resolvePivotUrl } from './utils';
+const hit = {
+    event: { domains: ['first.example', 'second.example'] },
+    user: { name: 'alice' }
+};
+describe('resolvePivotUrl', () => {
+    it('resolves custom, hit, array, and helper mappings', () => {
+        const helper = {
+            keyword: 'upper',
+            callback: (value) => value.toUpperCase()
+        };
+        const pivot = {
+            value: '{{domain}}/{{custom}}/{{upper user}}',
+            mappings: [
+                { key: 'domain', field: 'event.domains' },
+                { key: 'custom', field: 'custom', custom_value: 'fixed' },
+                { key: 'user', field: 'user.name' }
+            ]
+        };
+        expect(resolvePivotUrl(pivot, hit, [helper])).toBe('first.example/fixed/ALICE');
+    });
+    it('returns the original template when handlebars compilation fails', () => {
+        const error = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+        const pivot = { value: '{{#if', mappings: [] };
+        expect(resolvePivotUrl(pivot)).toBe('{{#if');
+        expect(error).toHaveBeenCalledOnce();
+        error.mockRestore();
+    });
+});

package/components/hooks/useMyPreferences.d.ts

@@ -1,3 +1,3 @@
-import type { AppPreferenceConfigs } from '@tui/core';
+import { type AppPreferenceConfigs } from '@tui/core';
 declare const useMyPreferences: () => AppPreferenceConfigs;
 export default useMyPreferences;

package/components/hooks/useMyPreferences.js

@@ -1,14 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Api, Article, Book, BookRounded, Code, Dashboard, Description, ExitToApp, FormatListBulleted, Help, HelpCenter, Key, ManageSearch, QueryStats, SavedSearch, Search, Settings, SettingsSuggest, Shield, Storage, SupervisorAccount, Terminal, Topic } from '@mui/icons-material';
-import { Divider, Stack } from '@mui/material';
+import { Divider, List, ListItem, ListItemButton, ListItemText, Stack, Switch } from '@mui/material';
+import { useCookiesStore } from '@tui/core';
 import { AppBarContext } from '@cccsaurora/howler-ui/components/app/providers/AppBarProvider';
 import Classification from '@cccsaurora/howler-ui/components/elements/display/Classification';
 import DocumentationButton from '@cccsaurora/howler-ui/components/elements/display/DocumentationButton';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { Fragment, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { applyMainMenuOperations } from '@cccsaurora/howler-ui/utils/menuUtils';
+import { useMyLocalStorageItem } from './useMyLocalStorage';
 // This is your App Name that will be displayed in the left drawer and the top navbar
 const APP_NAME = 'howler';
+const PersonalizationMenuItems = () => {
+    const { t } = useTranslation();
+    const resetCookies = useCookiesStore(store => store.reset);
+    const [pivotGroupEnabled, setPivotGroupEnabled, resetPivotGroup] = useMyLocalStorageItem(StorageKey.PIVOT_GROUP, true);
+    const resetPreferences = () => {
+        resetCookies();
+        resetPivotGroup();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(List, { dense: true, children: _jsx(ListItem, { disablePadding: true, secondaryAction: _jsx(Switch, { checked: pivotGroupEnabled, edge: "end", onChange: () => setPivotGroupEnabled(!pivotGroupEnabled), onClick: event => event.stopPropagation() }), children: _jsx(ListItemButton, { id: "personalization-pivot-group", onClick: () => setPivotGroupEnabled(!pivotGroupEnabled), children: _jsx(ListItemText, { children: t('personalization.pivotGroup') }) }) }) }), _jsx(Divider, {}), _jsx(List, { dense: true, children: _jsx(ListItemButton, { dense: true, id: "personalization-reset", onClick: resetPreferences, children: _jsx(ListItemText, { children: t('personalization.reset_text') }) }) })] }));
+};
 const useMyPreferences = () => {
     const { leftItems, rightItems } = useContext(AppBarContext);
     // The following menu items will show up in the Left Navigation Drawer
@@ -227,6 +241,7 @@ const useMyPreferences = () => {
             }
         },
         appLink: '/',
+        allowReset: false,
         allowThemeSelection: true,
         topnav: {
             quickSearchParam: 'query',
@@ -235,6 +250,9 @@ const useMyPreferences = () => {
                 menus: {
                     user: { i18nKey: 'usermenu', slot: USER_MENU_ITEMS },
                     admin: { i18nKey: 'adminmenu', slot: ADMIN_MENU_ITEMS }
+                },
+                slots: {
+                    bottom: [_jsx(PersonalizationMenuItems, {}, "personalization-menu-items")]
                 }
             },
             slots: {

package/components/hooks/useMyPreferences.test.d.ts

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

package/components/hooks/useMyPreferences.test.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { AppBarContext } from '@cccsaurora/howler-ui/components/app/providers/AppBarProvider';
+import { setupLocalStorageMock } from '@cccsaurora/howler-ui/tests/mocks';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import { vi } from 'vitest';
+import useMyPreferences from './useMyPreferences';
+const resetCookies = vi.hoisted(() => vi.fn());
+vi.mock('@tui/core', async () => {
+    const actual = await vi.importActual('@tui/core');
+    return {
+        ...actual,
+        useCookiesStore: (selector) => selector({ reset: resetCookies })
+    };
+});
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (key) => key })
+}));
+const localStorage = setupLocalStorageMock();
+const PersonalizationMenu = () => {
+    const preferences = useMyPreferences();
+    return _jsx(_Fragment, { children: preferences.topnav.profile.slots.bottom });
+};
+describe('PersonalizationMenuItems', () => {
+    beforeEach(() => {
+        localStorage.clear();
+        resetCookies.mockReset();
+    });
+    it('resets the pivot-grouping preference with the other personalization settings', async () => {
+        const user = userEvent.setup();
+        render(_jsx(AppBarContext.Provider, { value: { leftItems: [], rightItems: [], addToAppBar: vi.fn(), removeFromAppBar: vi.fn() }, children: _jsx(PersonalizationMenu, {}) }));
+        await user.click(screen.getByRole('switch'));
+        expect(localStorage.getItem(`howler.ui.${StorageKey.PIVOT_GROUP}`)).toBe('false');
+        await user.click(screen.getByTestId('personalization-reset'));
+        expect(resetCookies).toHaveBeenCalledOnce();
+        expect(localStorage.getItem(`howler.ui.${StorageKey.PIVOT_GROUP}`)).toBeNull();
+        expect(screen.getByRole('switch')).toBeChecked();
+    });
+});

package/components/routes/dossiers/DossierEditor.js

@@ -17,6 +17,7 @@ import QueryResultText from '../../elements/display/QueryResultText';
 import RecordQuery from '../hits/search/RecordQuery';
 import LeadForm from './LeadForm';
 import PivotForm from './PivotForm';
+import { pivotGroupValidation } from './utils';
 const DossierEditor = () => {
     const { t, i18n } = useTranslation();
     const params = useParams();
@@ -91,6 +92,11 @@ const DossierEditor = () => {
             }
         }
         for (const pivot of dossier.pivots ?? []) {
+            const groupErr = pivotGroupValidation(pivot.group ?? '');
+            if (groupErr) {
+                // There's an issue with the group you've chosen.
+                return t(groupErr);
+            }
             if (!pivot.label) {
                 // You have not configured a pivot label.
                 return t('route.dossiers.manager.validation.error.pivots.label');

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

@@ -22,7 +22,8 @@ vi.mock('api', () => ({
         dossier: {
             get: (...args) => mockApiDossierGet(...args),
             post: (...args) => mockApiDossierPost(...args),
-            put: (...args) => mockApiDossierPut(...args)
+            put: (...args) => mockApiDossierPut(...args),
+            groups: { get: vi.fn() }
         }
     }
 }));
@@ -264,6 +265,34 @@ describe('DossierEditor', () => {
                     expect(screen.getByTestId('pivot-form')).toBeInTheDocument();
                 });
             });
+            it('removes the group property when clearing a pivot group', async () => {
+                const user = userEvent.setup();
+                mockUseParams.mockReturnValue({ id: 'test-dossier-1' });
+                mockApiDossierGet.mockResolvedValueOnce({
+                    ...mockDossier,
+                    pivots: [{ ...mockDossier.pivots[0], group: 'network' }]
+                });
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    expect(screen.getByTestId('dossier-title')).toHaveValue('Test Dossier');
+                });
+                await user.click(screen.getByRole('tab', { name: /pivots/i }));
+                await waitFor(() => {
+                    expect(screen.getByTestId('pivot-form')).toBeInTheDocument();
+                });
+                const [groupInput] = screen.getAllByRole('combobox');
+                expect(groupInput).toHaveValue('network');
+                await user.clear(groupInput);
+                await waitFor(() => {
+                    expect(screen.getByRole('button', { name: /save/i })).not.toBeDisabled();
+                });
+                await user.click(screen.getByRole('button', { name: /save/i }));
+                await waitFor(() => {
+                    expect(mockApiDossierPut).toHaveBeenCalledOnce();
+                });
+                const savedDossier = mockApiDossierPut.mock.calls[0][1];
+                expect(savedDossier.pivots[0]).not.toHaveProperty('group');
+            });
         });
         describe('Validation', () => {
             it('should disable save button when title is missing', async () => {