@cccsaurora/howler-ui 2.15.0-dev.299 → 2.15.0-dev.308

package/components/app/providers/ApiConfigProvider.d.ts

@@ -5,5 +5,7 @@ export type ApiConfigContextType = {
     setConfig: (config: ApiType) => void;
 };
 export declare const ApiConfigContext: import("react").Context<ApiConfigContextType>;
-declare const ApiConfigProvider: FC<PropsWithChildren>;
+declare const ApiConfigProvider: FC<PropsWithChildren<{
+    defaultConfig?: ApiType;
+}>>;
 export default ApiConfigProvider;

package/components/app/providers/ApiConfigProvider.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useMemo, useState } from 'react';
 export const ApiConfigContext = createContext(null);
-const ApiConfigProvider = ({ children }) => {
-    const [config, setConfig] = useState({
-        indexes: null,
-        lookups: null,
-        configuration: null,
-        c12nDef: null,
-        mapping: null
-    });
+const ApiConfigProvider = ({ children, defaultConfig = {
+    indexes: null,
+    lookups: null,
+    configuration: null,
+    c12nDef: null,
+    mapping: null
+} }) => {
+    const [config, setConfig] = useState(defaultConfig);
     const context = useMemo(() => ({
         config,
         setConfig

package/components/elements/ThemedEditor.d.ts

@@ -1,3 +1,5 @@
 import type { EditorProps } from '@monaco-editor/react';
-declare const _default: import("react").NamedExoticComponent<EditorProps>;
+declare const _default: import("react").NamedExoticComponent<EditorProps & {
+    id?: string;
+}>;
 export default _default;

package/components/elements/ThemedEditor.js

@@ -4,7 +4,7 @@ import { useTheme } from '@mui/material';
 import useThemeBuilder from '@cccsaurora/howler-ui/commons/components/utils/hooks/useThemeBuilder';
 import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
 import { memo, useCallback, useEffect, useMemo } from 'react';
-const ThemedEditor = ({ beforeMount, options = {}, ...otherProps }) => {
+const ThemedEditor = ({ beforeMount, options = {}, id, ...otherProps }) => {
     const myTheme = useMyTheme();
     const themeBuilder = useThemeBuilder(myTheme);
     const theme = useTheme();
@@ -99,6 +99,6 @@ const ThemedEditor = ({ beforeMount, options = {}, ...otherProps }) => {
         },
         ...options
     }), [options]);
-    return (_jsx(Editor, { ...otherProps, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', beforeMount: _beforeMount, options: _options }));
+    return (_jsx(Editor, { ...otherProps, wrapperProps: { id }, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', beforeMount: _beforeMount, options: _options }));
 };
 export default memo(ThemedEditor);

package/components/routes/advanced/QueryEditor.d.ts

@@ -9,6 +9,7 @@ interface QueryEditorProps {
     height?: string;
     width?: string;
     editorOptions?: editor.IStandaloneEditorConstructionOptions;
+    id?: string;
 }
 declare const _default: import("react").NamedExoticComponent<QueryEditorProps>;
 export default _default;

package/components/routes/advanced/QueryEditor.js

@@ -12,7 +12,7 @@ import useHistoryCompletionProvider from './historyCompletionProvider';
 import useLuceneCompletionProvider from './luceneCompletionProvider';
 import LUCENE_TOKEN_PROVIDER from './luceneTokenProvider';
 import useYamlCompletionProvider from './yamlCompletionProvider';
-const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize = 16, height = '100%', width = '100%', editorOptions = {} }) => {
+const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize = 16, height = '100%', width = '100%', editorOptions = {}, id }) => {
     const theme = useTheme();
     const monaco = useMonaco();
     const { config } = useContext(ApiConfigContext);
@@ -85,6 +85,6 @@ const QueryEditor = ({ query, setQuery, onMount, language = 'lucene', fontSize =
             setFzfSearch(!fzfSearch);
         }
     }, [fzfSearch, setFzfSearch]);
-    return (_jsx(Box, { sx: { flex: 1 }, onKeyDownCapture: handleKeyPress, children: _jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: query, onChange: value => setQuery(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }) }));
+    return (_jsx(Box, { sx: { flex: 1 }, onKeyDownCapture: handleKeyPress, children: _jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: query, onChange: value => setQuery(value), beforeMount: beforeEditorMount, onMount: onMount, options: options, wrapperProps: { id } }) }));
 };
 export default memo(QueryEditor);

package/components/routes/dossiers/DossierEditor.js

@@ -52,23 +52,75 @@ const DossierEditor = () => {
         if ((dossier.leads ?? []).length < 1 && (dossier.pivots ?? []).length < 1) {
             return t('route.dossiers.manager.validation.error.items');
         }
-        if (!(dossier.leads ?? [])?.every(lead => lead.icon &&
-            iconExists(lead.icon) &&
-            lead.label?.en &&
-            lead.label?.fr &&
-            lead.label &&
-            lead.format &&
-            lead.content)) {
-            return t('route.dossiers.manager.validation.error.leads');
-        }
-        if (!(dossier.pivots ?? []).every(pivot => pivot.icon && iconExists(pivot.icon) && pivot.label && pivot.label.en && pivot.label.fr && pivot.format)) {
-            return t('route.dossiers.manager.validation.error.pivots');
+        for (const lead of dossier.leads ?? []) {
+            if (!lead.label) {
+                // You have not configured a lead label.
+                return t('route.dossiers.manager.validation.error.leads.label');
+            }
+            if (!lead.label.en) {
+                // You have not configured an english lead label.
+                return t('route.dossiers.manager.validation.error.leads.label.en');
+            }
+            if (!lead.label.fr) {
+                // You have not configured a french lead label.
+                return t('route.dossiers.manager.validation.error.leads.label.fr');
+            }
+            if (!lead.format) {
+                // You have not set the format for the lead with label <label>
+                return t('route.dossiers.manager.validation.error.leads.format', { label: lead.label[i18n.language] });
+            }
+            if (!lead.content) {
+                // You have not set the content for the lead with label <label>
+                return t('route.dossiers.manager.validation.error.leads.content', { label: lead.label[i18n.language] });
+            }
+            if (!lead.icon || !iconExists(lead.icon)) {
+                // You are missing an icon, or the specified icon does not exist for lead with label <label>
+                return t('route.dossiers.manager.validation.error.leads.icon', { label: lead.label[i18n.language] });
+            }
         }
-        if (!dossier.pivots?.every(pivot => (pivot.mappings ?? []).length === uniqBy(pivot.mappings ?? [], 'key').length)) {
-            return t('route.dossiers.manager.validation.error.pivots.duplicate');
+        for (const pivot of dossier.pivots ?? []) {
+            if (!pivot.label) {
+                // You have not configured a pivot label.
+                return t('route.dossiers.manager.validation.error.pivots.label');
+            }
+            if (!pivot.label.en) {
+                // You have not configured an english pivot label.
+                return t('route.dossiers.manager.validation.error.pivots.label.en');
+            }
+            if (!pivot.label.fr) {
+                // You have not configured a french pivot label.
+                return t('route.dossiers.manager.validation.error.pivots.label.fr');
+            }
+            if (!pivot.format) {
+                // You have not set the format for the pivot with label <label>
+                return t('route.dossiers.manager.validation.error.pivots.format', { label: pivot.label[i18n.language] });
+            }
+            if (!pivot.value) {
+                // You have not set the value for the pivot with label <label>
+                return t('route.dossiers.manager.validation.error.pivots.value', { label: pivot.label[i18n.language] });
+            }
+            if (!pivot.icon || !iconExists(pivot.icon)) {
+                // You are missing an icon, or the specified icon does not exist for pivot with label <label>
+                return t('route.dossiers.manager.validation.error.pivots.icon', { label: pivot.label[i18n.language] });
+            }
+            if (!pivot.mappings || pivot.mappings.length < 1) {
+                continue;
+            }
+            if ((pivot.mappings ?? []).length !== uniqBy(pivot.mappings ?? [], 'key').length) {
+                // You have a duplicate for pivot with label <label>
+                return t('route.dossiers.manager.validation.error.pivots.duplicate', { label: pivot.label[i18n.language] });
+            }
+            if (pivot.mappings?.some(mapping => !mapping.key)) {
+                // You have not configured a key for a mapping for pivot with label <label>
+                return t('route.dossiers.manager.validation.error.pivots.key', { label: pivot.label[i18n.language] });
+            }
+            if (pivot.mappings?.some(mapping => !mapping.field || (mapping.field === 'custom' && !mapping.custom_value))) {
+                // You have not configured a field or custom value for a mapping for pivot with label <label>
+                return t('route.dossiers.manager.validation.error.pivots.field', { label: pivot.label[i18n.language] });
+            }
         }
         return null;
-    }, [dossier, searchDirty, searchTotal, t]);
+    }, [dossier, i18n.language, searchDirty, searchTotal, t]);
     const save = useCallback(async () => {
         setLoading(true);
         try {
@@ -119,7 +171,7 @@ const DossierEditor = () => {
                                 whiteSpace: 'nowrap',
                                 pointerEvents: 'initial !important',
                                 ...(isNarrow ? { bottom: theme.spacing(1) } : { top: 0 })
-                            }), onClick: save, children: [loading ? _jsx(CircularProgress, { size: 24, sx: { mr: 1 } }) : _jsx(Save, { sx: { mr: 1 } }), _jsx(Typography, { children: t('save') })] }) }) }), _jsxs(Stack, { spacing: 1, height: "100%", children: [_jsx(Paper, { sx: { p: 1 }, children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(TextField, { disabled: !dossier || loading, label: "Title", size: "small", value: dossier.title ?? '', onChange: ev => setDossier(_dossier => ({ ..._dossier, title: ev.target.value })), fullWidth: true }), _jsxs(ToggleButtonGroup, { disabled: !dossier || loading, exclusive: true, value: dossier.type ?? 'global', onChange: (_ev, type) => setDossier(_dossier => ({ ..._dossier, type })), children: [_jsx(Tooltip, { title: t('route.dossiers.manager.global'), children: _jsx(ToggleButton, { value: "global", size: "small", children: _jsx(Language, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('route.dossiers.manager.personal'), children: _jsx(ToggleButton, { value: "personal", size: "small", children: _jsx(Person, { fontSize: "small" }) }) })] })] }), _jsx(Typography, { sx: theme => ({
+                            }), onClick: save, children: [loading ? _jsx(CircularProgress, { size: 24, sx: { mr: 1 } }) : _jsx(Save, { sx: { mr: 1 } }), _jsx(Typography, { children: t('save') })] }) }) }), _jsxs(Stack, { spacing: 1, height: "100%", children: [_jsx(Paper, { sx: { p: 1 }, children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Stack, { spacing: 1, direction: "row", children: [_jsx(TextField, { id: "dossier-title", disabled: !dossier || loading, label: "Title", size: "small", value: dossier.title ?? '', onChange: ev => setDossier(_dossier => ({ ..._dossier, title: ev.target.value })), fullWidth: true }), _jsxs(ToggleButtonGroup, { disabled: !dossier || loading, exclusive: true, value: dossier.type ?? 'global', onChange: (_ev, type) => setDossier(_dossier => ({ ..._dossier, type })), children: [_jsx(Tooltip, { title: t('route.dossiers.manager.global'), children: _jsx(ToggleButton, { value: "global", size: "small", children: _jsx(Language, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: t('route.dossiers.manager.personal'), children: _jsx(ToggleButton, { value: "personal", size: "small", children: _jsx(Person, { fontSize: "small" }) }) })] })] }), _jsx(Typography, { sx: theme => ({
                                             color: theme.palette.text.secondary,
                                             fontSize: '0.9em',
                                             fontStyle: 'italic',

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

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

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

@@ -0,0 +1,360 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable import/imports-first */
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import omit from 'lodash-es/omit';
+// Mock the API
+const mockApiSearchHitPost = vi.fn();
+const mockApiDossierGet = vi.fn();
+const mockApiDossierPost = vi.fn();
+const mockApiDossierPut = vi.fn();
+vi.mock('api', () => ({
+    default: {
+        search: {
+            hit: {
+                post: (...args) => mockApiSearchHitPost(...args)
+            }
+        },
+        dossier: {
+            get: (...args) => mockApiDossierGet(...args),
+            post: (...args) => mockApiDossierPost(...args),
+            put: (...args) => mockApiDossierPut(...args)
+        }
+    }
+}));
+// Mock react-router-dom
+vi.mock('react-router-dom', async () => {
+    const actual = await vi.importActual('react-router-dom');
+    return {
+        ...actual,
+        useParams: vi.fn(),
+        useNavigate: () => vi.fn()
+    };
+});
+// Mock ParameterContext
+const mockSetQuery = vi.fn();
+vi.mock('use-context-selector', async () => {
+    const actual = await vi.importActual('use-context-selector');
+    return {
+        ...actual,
+        useContextSelector: (_context, selector) => {
+            const mockContext = { setQuery: mockSetQuery };
+            return selector(mockContext);
+        }
+    };
+});
+vi.mock('components/elements/ThemedEditor', () => ({
+    default: ({ value, onChange, id }) => {
+        return (_jsx("input", { id: id || 'themed-editor', value: value, onChange: e => {
+                onChange?.(e.target.value, true);
+            } }));
+    }
+}));
+vi.mock('@monaco-editor/react', async () => {
+    const actual = await vi.importActual('@monaco-editor/react');
+    return { ...actual, useMonaco: vi.fn() };
+});
+// Mock iconExists
+vi.mock('@iconify/react/dist/iconify.js', () => ({
+    Icon: ({ ...args }) => _jsx("div", { ...args, children: 'iconify' }),
+    iconExists: (icon) => icon?.startsWith('material-symbols:') || icon === 'test-icon'
+}));
+// Mock MUI components
+vi.mock('@mui/material', async () => {
+    const actual = await vi.importActual('@mui/material');
+    return {
+        ...actual,
+        Autocomplete: ({ ...props }) => {
+            return _jsx(actual.Autocomplete, { ...props });
+        },
+        CircularProgress: ({ ...props }) => _jsx("div", { role: "progressbar", id: "loading", ...omit(props, ['flexItem', 'sx']) }),
+        LinearProgress: ({ ...props }) => _jsx("div", { role: "progressbar", id: "loading", ...omit(props, ['flexItem', 'sx']) })
+    };
+});
+// Mock child components
+vi.mock('commons/components/pages/PageCenter', () => ({
+    default: ({ children, ...props }) => (_jsx("div", { id: "page-center", ...omit(props, ['textAlign', 'maxWidth']), children: children }))
+}));
+vi.mock('../../elements/display/QueryResultText', () => ({
+    default: ({ count, query }) => (_jsxs("div", { id: "query-result-text", children: [count, " ", ' results for ', " ", query] }))
+}));
+vi.mock('../hits/search/HitQuery', () => ({
+    default: ({ onChange, triggerSearch, disabled }) => {
+        return (_jsxs("div", { id: "hit-query", children: [_jsx("input", { id: "query-input", disabled: disabled, onChange: e => {
+                        onChange?.(e.target.value, false);
+                    }, onKeyDown: e => {
+                        if (e.key === 'Enter') {
+                            triggerSearch(e.target.value);
+                        }
+                    } }), _jsx("button", { id: "trigger-search", onClick: () => triggerSearch('howler.id:*'), children: 'search' })] }));
+    }
+}));
+import ApiConfigProvider from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import i18n from '@cccsaurora/howler-ui/i18n';
+import { I18nextProvider } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import DossierEditor from './DossierEditor';
+const mockUseParams = vi.mocked(useParams);
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const mockNavigate = vi.mocked(useNavigate());
+// Mock data
+const mockDossier = {
+    dossier_id: 'test-dossier-1',
+    id: 'test-dossier-1',
+    title: 'Test Dossier',
+    type: 'global',
+    query: 'howler.id:*',
+    leads: [
+        {
+            label: { en: 'Lead 1', fr: 'Piste 1' },
+            icon: 'material-symbols:info',
+            format: 'markdown',
+            content: '# Hello, World'
+        }
+    ],
+    pivots: [
+        {
+            label: { en: 'Pivot 1', fr: 'Pivot 1' },
+            icon: 'material-symbols:link',
+            format: 'link',
+            value: 'pivot.field',
+            mappings: [{ key: 'key1', field: 'howler.id' }]
+        }
+    ]
+};
+const Wrapper = ({ children }) => {
+    return (_jsx(I18nextProvider, { i18n: i18n, defaultNS: "translation", children: _jsx(ApiConfigProvider, { defaultConfig: {
+                indexes: { hit: { 'howler.id': {} } },
+                lookups: {},
+                configuration: {},
+                c12nDef: {},
+                mapping: {}
+            }, children: children }) }));
+};
+describe('DossierEditor', () => {
+    beforeEach(() => {
+        mockApiSearchHitPost.mockClear();
+        mockApiDossierGet.mockClear();
+        mockApiDossierPost.mockClear();
+        mockApiDossierPut.mockClear();
+        mockNavigate.mockClear();
+        mockSetQuery.mockClear();
+        // Default mock implementations
+        mockApiSearchHitPost.mockResolvedValue({ total: 42, items: [] });
+    });
+    describe('Component initialization', () => {
+        beforeEach(() => {
+            mockApiDossierGet.mockClear();
+        });
+        it('should render with default values for new dossier', async () => {
+            mockUseParams.mockReturnValueOnce({ id: null });
+            render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+            await waitFor(() => {
+                expect(screen.getByTestId('dossier-title')).toBeInTheDocument();
+            });
+            expect(screen.getByTestId('dossier-title')).toHaveValue('');
+            expect(screen.getByTestId('hit-query')).toBeInTheDocument();
+        });
+        it('should load existing dossier when id is provided', async () => {
+            mockApiDossierGet.mockResolvedValueOnce(mockDossier);
+            mockUseParams.mockReturnValue({ id: 'test-dossier-1' });
+            render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+            await waitFor(() => {
+                expect(mockApiDossierGet).toHaveBeenCalledOnce();
+            });
+            await waitFor(() => {
+                expect(screen.getByTestId('dossier-title')).toHaveValue('Test Dossier');
+            });
+        });
+        it('should show loading state while fetching dossier', async () => {
+            let resolvePromise;
+            const delayedPromise = new Promise(resolve => {
+                resolvePromise = resolve;
+            });
+            mockApiDossierGet.mockReturnValue(delayedPromise);
+            mockUseParams.mockReturnValue({ id: 'test-dossier-1' });
+            const { rerender } = render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+            await waitFor(() => {
+                expect(mockApiDossierGet).toHaveBeenCalledOnce();
+            });
+            rerender(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+            await waitFor(() => {
+                expect(screen.getByRole('progressbar')).toBeInTheDocument();
+            });
+            // Resolve the promise
+            resolvePromise(mockDossier);
+            rerender(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+            await waitFor(() => {
+                expect(mockApiDossierGet).toHaveBeenCalled();
+                expect(screen.getByTestId('dossier-title')).toHaveValue('Test Dossier');
+            });
+        });
+        describe('Form interactions', () => {
+            it('should update title field', async () => {
+                const user = userEvent.setup();
+                const { rerender } = render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                const titleInput = screen.getByTestId('dossier-title');
+                await user.click(titleInput);
+                await user.keyboard('{Control>}a{/Control}{Backspace}');
+                await user.keyboard('My New Dossier');
+                rerender(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    expect(titleInput).toHaveValue('My New Dossier');
+                });
+            });
+            it('should toggle between global and personal type', async () => {
+                const user = userEvent.setup();
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                const personalButton = screen.getByRole('button', { name: /personal/i });
+                const globalButton = screen.getByRole('button', { name: /global/i });
+                await user.click(personalButton);
+                // The toggle button should now show personal as selected
+                expect(personalButton).toHaveAttribute('aria-pressed', 'true');
+                expect(globalButton).toHaveAttribute('aria-pressed', 'false');
+                await user.click(globalButton);
+                // The toggle button should now show personal as selected
+                expect(personalButton).toHaveAttribute('aria-pressed', 'false');
+                expect(globalButton).toHaveAttribute('aria-pressed', 'true');
+            });
+            it('should trigger search when query changes', async () => {
+                const user = userEvent.setup();
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                const queryInput = screen.getByTestId('query-input');
+                await user.click(queryInput);
+                await user.keyboard('{Control>}a{/Control}{Backspace}');
+                await user.keyboard('test query');
+                await user.keyboard('{Enter}');
+                await waitFor(() => {
+                    expect(mockApiSearchHitPost).toHaveBeenCalledWith({
+                        query: 'test query',
+                        rows: 0
+                    });
+                });
+            });
+            it('should display query result count after search', async () => {
+                const user = userEvent.setup();
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                const queryInput = screen.getByTestId('query-input');
+                await user.type(queryInput, 'test query');
+                await user.keyboard('{Enter}');
+                await waitFor(() => {
+                    expect(screen.getByTestId('query-result-text')).toBeInTheDocument();
+                });
+            });
+        });
+        describe('Tabs', () => {
+            it('should render leads and pivots tabs', async () => {
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    expect(screen.getByRole('tab', { name: /leads/i })).toBeInTheDocument();
+                    expect(screen.getByRole('tab', { name: /pivots/i })).toBeInTheDocument();
+                });
+            });
+            it('should show LeadForm by default', async () => {
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    expect(screen.getByTestId('lead-form')).toBeInTheDocument();
+                });
+            });
+            it('should switch to PivotForm when pivots tab is clicked', async () => {
+                const user = userEvent.setup();
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                const pivotsTab = screen.getByRole('tab', { name: /pivots/i });
+                await user.click(pivotsTab);
+                await waitFor(() => {
+                    expect(screen.getByTestId('pivot-form')).toBeInTheDocument();
+                });
+            });
+        });
+        describe('Validation', () => {
+            it('should disable save button when title is missing', async () => {
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    const saveButton = screen.getByRole('button', { name: /save/i });
+                    expect(saveButton).toBeDisabled();
+                });
+            });
+            it('should disable save button when no leads or pivots exist', async () => {
+                mockUseParams.mockReturnValue({ id: null });
+                const user = userEvent.setup();
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                const titleInput = screen.getByTestId('dossier-title');
+                await user.type(titleInput, 'Test Title');
+                const queryInput = screen.getByTestId('query-input');
+                user.click(queryInput);
+                await user.keyboard('test query');
+                await user.keyboard('{Enter}');
+                await waitFor(() => {
+                    expect(screen.getByTestId('query-result-text')).toBeInTheDocument();
+                });
+                const saveButton = screen.getByRole('button', { name: /save/i });
+                expect(saveButton).toBeDisabled();
+            });
+            it('should enable save button when all required fields are filled', async () => {
+                const user = userEvent.setup();
+                mockUseParams.mockReturnValue({ id: null });
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                // Fill title
+                const titleInput = screen.getByTestId('dossier-title');
+                await user.type(titleInput, 'Test Title');
+                // Add query and trigger search
+                const queryInput = screen.getByTestId('query-input');
+                await user.click(queryInput);
+                await user.keyboard('test query');
+                await user.keyboard('{Enter}');
+                await waitFor(() => {
+                    expect(screen.getByTestId('query-result-text')).toBeInTheDocument();
+                    expect(screen.getByTestId('create-lead-alert')).toBeInTheDocument();
+                });
+                // Add a lead
+                await user.click(screen.getByTestId('add-lead'));
+                await waitFor(() => {
+                    expect(screen.getByTestId('lead-format')).toBeInTheDocument();
+                });
+                await user.click(screen.getByTestId('lead-format'));
+                await user.keyboard('markdown');
+                await user.keyboard('[ArrowDown]');
+                await user.keyboard('{Enter}');
+                await user.click(screen.getByTestId('lead-markdown'));
+                await user.keyboard('hello world');
+                await waitFor(() => {
+                    const saveButton = screen.getByRole('button', { name: /save/i });
+                    expect(saveButton).not.toBeDisabled();
+                });
+            });
+        });
+        describe('Dirty state tracking', () => {
+            it('should mark form as dirty when changes are made', async () => {
+                const user = userEvent.setup();
+                mockUseParams.mockReturnValue({ id: 'test-dossier-1' });
+                mockApiDossierGet.mockResolvedValueOnce(mockDossier);
+                mockApiSearchHitPost.mockResolvedValueOnce({ total: -1, items: [] });
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    expect(screen.getByTestId('dossier-title')).toHaveValue('Test Dossier');
+                });
+                const saveButton = screen.getByRole('button', { name: /save/i });
+                expect(saveButton).toBeDisabled();
+                // Make a change
+                const queryInput = screen.getByTestId('query-input');
+                await user.click(queryInput);
+                await user.keyboard('test query');
+                await user.keyboard('{Enter}');
+                await waitFor(() => {
+                    expect(saveButton).not.toBeDisabled();
+                });
+            });
+            it('should not mark form as dirty when no changes are made', async () => {
+                mockUseParams.mockReturnValue({ id: 'test-dossier-1' });
+                mockApiDossierGet.mockResolvedValueOnce(mockDossier);
+                mockApiSearchHitPost.mockResolvedValueOnce({ total: 10, items: [] });
+                render(_jsx(Wrapper, { children: _jsx(DossierEditor, {}) }));
+                await waitFor(() => {
+                    expect(screen.getByTestId('dossier-title')).toHaveValue('Test Dossier');
+                });
+                const saveButton = screen.getByRole('button', { name: /save/i });
+                expect(saveButton).toBeDisabled();
+            });
+        });
+    });
+});

package/components/routes/dossiers/LeadEditor.js

@@ -25,8 +25,8 @@ const LeadEditor = ({ lead, update }) => {
         }
         monaco.editor.getModels().forEach(model => model.setEOL(monaco.editor.EndOfLineSequence.LF));
     }, [monaco]);
-    return (_jsxs(Stack, { spacing: 2, pt: 2, sx: { flex: 1 }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", position: "relative", children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.icon'), value: icon, disabled: !lead, 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: !lead, sx: { minWidth: '0 !important', ml: 1 }, onClick: () => update(null), 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.label.en'), disabled: !lead, value: lead?.label?.en ?? '', fullWidth: true, onChange: ev => update({ label: { en: ev.target.value } }) }), _jsx(TextField, { size: "small", label: t('route.dossiers.manager.label.fr'), disabled: !lead, value: lead?.label?.fr ?? '', fullWidth: true, onChange: ev => update({ label: { fr: ev.target.value } }) })] }), _jsx(Autocomplete, { disabled: !lead, options: ['markdown', ...howlerPluginStore.leadFormats], renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.format') }), value: lead?.format ?? '', onChange: (_ev, format) => update({ format, metadata: '{}', content: '' }) }), !!lead?.format &&
-                (lead.format === 'markdown' ? (_jsx(ThemedEditor, { height: "100%", width: "100%", language: "markdown", theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: lead?.content ?? '', onChange: content => update({ content }), options: {} })) : (pluginStore.executeFunction(`lead.${lead.format}.form`, {
+    return (_jsxs(Stack, { spacing: 2, pt: 2, sx: { flex: 1 }, id: "lead-editor", children: [_jsxs(Stack, { direction: "row", alignItems: "center", position: "relative", children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.icon'), value: icon, disabled: !lead, 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: !lead, sx: { minWidth: '0 !important', ml: 1 }, onClick: () => update(null), 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.label.en'), disabled: !lead, value: lead?.label?.en ?? '', fullWidth: true, onChange: ev => update({ label: { en: ev.target.value } }) }), _jsx(TextField, { size: "small", label: t('route.dossiers.manager.label.fr'), disabled: !lead, value: lead?.label?.fr ?? '', fullWidth: true, onChange: ev => update({ label: { fr: ev.target.value } }) })] }), _jsx(Autocomplete, { disabled: !lead, options: ['markdown', ...howlerPluginStore.leadFormats], id: "lead-format", renderInput: params => _jsx(TextField, { ...params, size: "small", label: t('route.dossiers.manager.format') }), value: lead?.format ?? null, onChange: (_ev, format) => update({ format, metadata: '{}', content: '' }) }), !!lead?.format &&
+                (lead.format === 'markdown' ? (_jsx(ThemedEditor, { id: "lead-markdown", height: "100%", width: "100%", language: "markdown", theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: lead?.content ?? '', onChange: content => update({ content }), options: {} })) : (pluginStore.executeFunction(`lead.${lead.format}.form`, {
                     lead,
                     metadata,
                     update,

package/components/routes/dossiers/LeadForm.js

@@ -10,7 +10,7 @@ import LeadEditor from './LeadEditor';
 const LeadForm = ({ dossier, setDossier, loading }) => {
     const { t, i18n } = useTranslation();
     const [tab, setTab] = useState(0);
-    return (_jsxs(Paper, { sx: { p: 1, display: 'flex', flexDirection: 'column', flex: 1 }, children: [_jsxs(Stack, { direction: "row", children: [!dossier?.leads || dossier.leads.length < 1 ? (_jsx(Alert, { variant: "outlined", severity: "warning", sx: {
+    return (_jsxs(Paper, { sx: { p: 1, display: 'flex', flexDirection: 'column', flex: 1 }, id: "lead-form", children: [_jsxs(Stack, { direction: "row", children: [!dossier?.leads || dossier.leads.length < 1 ? (_jsx(Alert, { id: "create-lead-alert", variant: "outlined", severity: "warning", sx: {
                             mr: 1,
                             px: 1,
                             py: 0,
@@ -24,7 +24,7 @@ const LeadForm = ({ dossier, setDossier, loading }) => {
                             '& .MuiAlert-message': {
                                 py: 0.7
                             }
-                        }, children: t('route.dossiers.manager.lead.create') })) : (_jsx(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), sx: { minHeight: '0 !important' }, children: dossier.leads?.map((lead, index) => (_jsx(Tab, { disabled: !dossier || loading, sx: { py: 1, minHeight: '0 !important' }, label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: index }, lead.content))) })), _jsx(Button, { sx: { ml: 'auto', alignSelf: 'end', minWidth: '0 !important' }, size: "small", variant: "contained", onClick: () => {
+                        }, children: t('route.dossiers.manager.lead.create') })) : (_jsx(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), sx: { minHeight: '0 !important' }, children: dossier.leads?.map((lead, index) => (_jsx(Tab, { disabled: !dossier || loading, sx: { py: 1, minHeight: '0 !important' }, label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: index }, lead.label?.en + lead.content))) })), _jsx(Button, { id: "add-lead", sx: { ml: 'auto', alignSelf: 'end', minWidth: '0 !important' }, size: "small", variant: "contained", onClick: () => {
                             setTab(dossier.leads?.length ?? 0);
                             setDossier(_dossier => ({
                                 ..._dossier,

package/components/routes/dossiers/PivotForm.js

@@ -22,7 +22,7 @@ const LinkForm = ({ pivot, update }) => {
                                     mappings: pivot.mappings.filter((_m, _index) => index !== _index)
                                 }), children: _jsx(Remove, {}) })] }), _mapping.field === 'custom' && (_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.mapping.custom'), disabled: !pivot, value: _mapping?.custom_value ?? '', onChange: ev => update({
                             mappings: pivot.mappings.map((_m, _index) => index === _index ? { ..._m, custom_value: ev.target.value } : _m)
-                        }) }))] }, index))), _jsx(Button, { disabled: !pivot, sx: { ml: 'auto', alignSelf: 'end', minWidth: '0 !important' }, size: "small", variant: "contained", onClick: () => {
+                        }) }))] }, index))), _jsx(Button, { id: "add-pivot", disabled: !pivot, sx: { ml: 'auto', alignSelf: 'end', minWidth: '0 !important' }, size: "small", variant: "contained", onClick: () => {
                     update({
                         mappings: [...(pivot.mappings ?? []), { key: 'key' }]
                     });
@@ -53,7 +53,7 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
     })), [setDossier, tab]);
     const pivot = useMemo(() => dossier.pivots?.[tab] ?? null, [dossier.pivots, tab]);
     const icon = useMemo(() => pivot?.icon ?? 'material-symbols:find-in-page', [pivot?.icon]);
-    return (_jsx(Paper, { sx: { p: 1, display: 'flex', flexDirection: 'column', flex: 1 }, children: _jsxs(Stack, { spacing: 2, children: [_jsxs(Stack, { direction: "row", children: [!dossier?.pivots || dossier.pivots.length < 1 ? (_jsx(Alert, { variant: "outlined", severity: "warning", sx: {
+    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,
                                 py: 0,

package/components/routes/help/markdown/en/retention.md.js

@@ -1 +1 @@
-export default "# Retention in Howler\n\nIn order to comply with organizational policies, Howler is configured to purge stale alerts after a specific amount of time. On this instance, that duration is `duration`.\n\nHowler calculates whether it is time for the removal of an alert by the `event.created` date - once this surpasses the confgured deadline, a nightly automated job will remove the alert.\n\nIn order to communicate this to the user, see the example alert below:\n\n`alert`\n\nIn the top right, hovering over the timestamp will outline how long users have before the alert is removed. In order to ensure compliance with policy, ensure that `event.created` matches the date the underlying data was collected, allowing howler to ensure data is purged in time.\n\n```alert\nThis will soon change - there will be a dedicated field to set that will override this approach.\n```\n"
+export default "# Retention in Howler\n\nIn order to comply with organizational policies, Howler is configured to purge stale alerts after a specific amount of\ntime. On this instance, that duration is `duration`.\n\n## How Retention Works\n\nHowler uses an automated retention job that runs on a configurable schedule (typically nightly) to remove\nalerts that have exceeded their retention period. The system evaluates two criteria for deletion:\n\n1. **Standard Retention**: Alerts are deleted when `event.created` exceeds the configured retention period\n2. **Custom Expiry**: Alerts are deleted when the `howler.expiry` field indicates the alert should expire\n\nAn alert will be removed when **either** condition is met - whichever comes first.\n\n## Custom Expiry (`howler.expiry`)\n\nThe `howler.expiry` field allows detection engineers to set custom retention periods for specific alerts\nduring ingestion. This field overrides the standard retention calculation and is commonly used when:\n\n- Clients have requested shorter data retention periods than the deployment default\n- Specific operations require time-limited data storage (e.g., a cybersecurity operation where data can\n  only be retained for two weeks after ingest)\n- Regulatory requirements mandate earlier deletion for certain types of data\n\n```alert\nThe howler.expiry field can only shorten retention periods, not extend them. No matter\nwhat, alerts cannot be retained longer than the system-wide retention cutoff based on event.created.\n```\n\n## Configuration\n\nAdministrators can configure retention settings in the system configuration:\n\n```yaml\nsystem:\n  type: staging\n  retention:\n    limit_amount: 120      # Retention period duration\n    limit_unit: days       # Time unit (days, hours, etc.)\n    crontab: \"0 0 * * *\"   # Schedule (nightly at midnight)\n    enabled: true          # Whether retention is active\n```\n\n## User Interface\n\nTo communicate retention timing to users, see the example alert below:\n\n`alert`\n\nIn the top right, hovering over the timestamp will outline how long users have before the alert is\nremoved. In order to ensure compliance with policy, ensure that `event.created` matches the date the\nunderlying data was collected, allowing Howler to ensure data is purged in time.\n"

package/components/routes/help/markdown/fr/retention.md.js

@@ -1 +1 @@
-export default "# R\u00e9tention dans Howler\n\nAfin de se conformer au r\u00e8glement, Howler est configur\u00e9 pour purger les alertes p\u00e9rim\u00e9es apr\u00e8s une p\u00e9riode de temps sp\u00e9cifique. Dans cette instance, cette dur\u00e9e est `duration`.\n\nHowler calcule s'il est temps de supprimer une alerte en fonction de la date `event.created` - une fois que celle-ci d\u00e9passe la date limite configur\u00e9e, un travail automatis\u00e9 nocturne supprimera l'alerte.\n\nAfin de communiquer cela \u00e0 l'utilisateur, voir l'exemple d'alerte ci-dessous :\n\n`alert`\n\nEn haut \u00e0 droite, le survol de l'horodatage indique le temps dont dispose l'utilisateur avant que l'alerte ne soit supprim\u00e9e. Afin de se conformer au r\u00e8glement, assurez-vous que `event.created` correspond \u00e0 la date \u00e0 laquelle les donn\u00e9es sous-jacentes ont \u00e9t\u00e9 collect\u00e9es, ce qui permet \u00e0 howler de s'assurer que les donn\u00e9es sont purg\u00e9es \u00e0 temps.\n\n```alert\nCela va bient\u00f4t changer - il y aura un champ d\u00e9di\u00e9 \u00e0 d\u00e9finir qui remplacera cette approche.\n```\n"
+export default "# R\u00e9tention dans Howler\n\nAfin de se conformer aux politiques organisationnelles, Howler est configur\u00e9 pour purger les alertes\np\u00e9rim\u00e9es apr\u00e8s une p\u00e9riode de temps sp\u00e9cifique. Dans cette instance, cette dur\u00e9e est `duration`.\n\n## Comment fonctionne la r\u00e9tention\n\nHowler utilise un travail de r\u00e9tention automatis\u00e9 qui s'ex\u00e9cute selon un calendrier configurable\n(g\u00e9n\u00e9ralement nocturne) pour supprimer les alertes qui ont d\u00e9pass\u00e9 leur p\u00e9riode de r\u00e9tention. Le syst\u00e8me\n\u00e9value deux crit\u00e8res de suppression :\n\n1. **R\u00e9tention standard** : Les alertes sont supprim\u00e9es lorsque `event.created` d\u00e9passe la p\u00e9riode de\n   r\u00e9tention configur\u00e9e\n2. **Expiration personnalis\u00e9e** : Les alertes sont supprim\u00e9es lorsque le champ `howler.expiry` indique\n   que l'alerte doit expirer\n\nUne alerte sera supprim\u00e9e lorsque **l'une ou l'autre** condition est remplie - selon celle qui arrive en\npremier.\n\n## Expiration personnalis\u00e9e (`howler.expiry`)\n\nLe champ `howler.expiry` permet aux ing\u00e9nieurs de d\u00e9tection de d\u00e9finir des p\u00e9riodes de r\u00e9tention\npersonnalis\u00e9es pour des alertes sp\u00e9cifiques lors de l'ingestion. Ce champ remplace le calcul de\nr\u00e9tention standard et est couramment utilis\u00e9 quand :\n\n- Les clients ont demand\u00e9 des p\u00e9riodes de r\u00e9tention de donn\u00e9es plus courtes que la valeur par d\u00e9faut\n  du d\u00e9ploiement\n- Des op\u00e9rations sp\u00e9cifiques n\u00e9cessitent un stockage de donn\u00e9es \u00e0 dur\u00e9e limit\u00e9e (par ex., une op\u00e9ration\n  de cybers\u00e9curit\u00e9 o\u00f9 les donn\u00e9es ne peuvent \u00eatre conserv\u00e9es que deux semaines apr\u00e8s ingestion)\n- Les exigences r\u00e9glementaires imposent une suppression plus pr\u00e9coce pour certains types de donn\u00e9es\n\n```alert\nLe champ howler.expiry ne peut que raccourcir les p\u00e9riodes de r\u00e9tention, pas les\nprolonger. Quoi qu'il arrive, les alertes ne peuvent pas \u00eatre conserv\u00e9es plus longtemps que la limite de\nr\u00e9tention syst\u00e8me bas\u00e9e sur event.created.\n```\n\n## Configuration\n\nLes administrateurs peuvent configurer les param\u00e8tres de r\u00e9tention dans la configuration syst\u00e8me :\n\n```yaml\nsystem:\n  type: staging\n  retention:\n    limit_amount: 120      # Dur\u00e9e de la p\u00e9riode de r\u00e9tention\n    limit_unit: days       # Unit\u00e9 de temps (days, hours, etc.)\n    crontab: \"0 0 * * *\"    # Calendrier (nocturne \u00e0 minuit)\n    enabled: true          # Si la r\u00e9tention est active\n```\n\n## Interface utilisateur\n\nAfin de communiquer le d\u00e9lai de r\u00e9tention aux utilisateurs, voir l'exemple d'alerte ci-dessous :\n\n`alert`\n\nEn haut \u00e0 droite, le survol de l'horodatage indique le temps dont dispose l'utilisateur avant que\nl'alerte ne soit supprim\u00e9e. Afin de se conformer aux politiques, assurez-vous que `event.created`\ncorrespond \u00e0 la date \u00e0 laquelle les donn\u00e9es sous-jacentes ont \u00e9t\u00e9 collect\u00e9es, permettant \u00e0 Howler de\ns'assurer que les donn\u00e9es sont purg\u00e9es \u00e0 temps.\n"

package/components/routes/hits/search/HitQuery.js

@@ -128,7 +128,7 @@ const HitQuery = ({ searching = false, disabled = false, compact = false, trigge
                 p: 0.5,
                 height: multiline ? `${DEFAULT_MULTILINE_HEIGHT + y}px` : theme.spacing(5)
             }
-        ], onKeyDown: e => e.stopPropagation(), children: [_jsx(TuiIconButton, { disabled: query.includes('\n#') || disabled, sx: { mr: 1, alignSelf: 'start' }, onClick: () => setMultiline(!multiline), color: multiline ? 'primary' : theme.palette.text.primary, transparent: !multiline, size: compact ? 'small' : 'medium', children: _jsx(Height, { sx: { fontSize: '20px' } }) }), _jsx(QueryEditor, { query: preppedQuery, setQuery: setQuery, language: "lucene", height: multiline ? `${DEFAULT_MULTILINE_HEIGHT - 30}px` : '20px', onMount: onMount, editorOptions: options }), fzfSearch && (_jsx(Tooltip, { title: t('route.history'), children: _jsx(History, {}) })), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: () => setQuery('howler.id:*'), sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.clear'), children: _jsx(Clear, { sx: { fontSize: '20px' } }) }) }), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: search, sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.search'), children: _jsx(Badge, { invisible: !isDirty, color: "warning", variant: "dot", children: _jsx(Search, { sx: { fontSize: '20px' } }) }) }) }), !loaded && (_jsx(Skeleton, { variant: "rectangular", sx: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, height: "100%" })), multiline && (_jsx(Box, { sx: {
+        ], onKeyDown: e => e.stopPropagation(), children: [_jsx(TuiIconButton, { disabled: query.includes('\n#') || disabled, sx: { mr: 1, alignSelf: 'start' }, onClick: () => setMultiline(!multiline), color: multiline ? 'primary' : theme.palette.text.primary, transparent: !multiline, size: compact ? 'small' : 'medium', children: _jsx(Height, { sx: { fontSize: '20px' } }) }), _jsx(QueryEditor, { id: "hit-query", query: preppedQuery, setQuery: setQuery, language: "lucene", height: multiline ? `${DEFAULT_MULTILINE_HEIGHT - 30}px` : '20px', onMount: onMount, editorOptions: options }), fzfSearch && (_jsx(Tooltip, { title: t('route.history'), children: _jsx(History, {}) })), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: () => setQuery('howler.id:*'), sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.clear'), children: _jsx(Clear, { sx: { fontSize: '20px' } }) }) }), _jsx(TuiIconButton, { disabled: searching || disabled, onClick: search, sx: { ml: 1, alignSelf: 'start', flexShrink: 0 }, size: compact ? 'small' : 'medium', children: _jsx(Tooltip, { title: t('route.search'), children: _jsx(Badge, { invisible: !isDirty, color: "warning", variant: "dot", children: _jsx(Search, { sx: { fontSize: '20px' } }) }) }) }), !loaded && (_jsx(Skeleton, { variant: "rectangular", sx: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, height: "100%" })), multiline && (_jsx(Box, { sx: {
                     position: 'absolute',
                     left: 0,
                     right: 0,

package/locales/en/translation.json

@@ -639,8 +639,22 @@
     "route.dossiers.manager.validation.search": "You must search to validate your query before submitting.",
     "route.dossiers.manager.validation.error.missing": "{{field}} is invalid.",
     "route.dossiers.manager.validation.error.leads": "A lead is misconfigured.",
+    "route.dossiers.manager.validation.error.leads.label": "You have not configured a lead label.",
+    "route.dossiers.manager.validation.error.leads.label.en": "You have not configured an English lead label.",
+    "route.dossiers.manager.validation.error.leads.label.fr": "You have not configured a French lead label.",
+    "route.dossiers.manager.validation.error.leads.format": "You have not set the format for the lead '{{label}}'.",
+    "route.dossiers.manager.validation.error.leads.content": "You have not set the content for the lead '{{label}}'.",
+    "route.dossiers.manager.validation.error.leads.icon": "You are missing an icon, or the specified icon does not exist for lead '{{label}}'.",
     "route.dossiers.manager.validation.error.pivots": "A pivot is misconfigured.",
-    "route.dossiers.manager.validation.error.pivots.duplicate": "A pivot has a duplicate key.",
+    "route.dossiers.manager.validation.error.pivots.label": "You have not configured a pivot label.",
+    "route.dossiers.manager.validation.error.pivots.label.en": "You have not configured an English pivot label.",
+    "route.dossiers.manager.validation.error.pivots.label.fr": "You have not configured a French pivot label.",
+    "route.dossiers.manager.validation.error.pivots.format": "You have not set the format for the pivot '{{label}}'.",
+    "route.dossiers.manager.validation.error.pivots.value": "You have not set the value for the pivot '{{label}}'.",
+    "route.dossiers.manager.validation.error.pivots.icon": "You are missing an icon, or the specified icon does not exist for pivot '{{label}}'.",
+    "route.dossiers.manager.validation.error.pivots.duplicate": "The pivot '{{label}}' has a duplicate key.",
+    "route.dossiers.manager.validation.error.pivots.key": "You have not configured a key for a mapping in the pivot '{{label}}'.",
+    "route.dossiers.manager.validation.error.pivots.field": "You have not configured a field or custom value for a mapping in the pivot '{{label}}'.",
     "route.dossiers.manager.validation.error.items": "You have not configured any leads or pivots.",
     "route.views": "Views",
     "route.views.create.success": "View Created.",

package/locales/fr/translation.json

@@ -640,8 +640,22 @@
     "route.dossiers.manager.validation.search": "Vous devez effectuer une recherche pour valider votre requête avant de la soumettre.",
     "route.dossiers.manager.validation.error.missing": "{{field}} est invalide.",
     "route.dossiers.manager.validation.error.leads": "Une piste est mal configuré.",
+    "route.dossiers.manager.validation.error.leads.label": "Vous n'avez pas configuré d'étiquette de piste.",
+    "route.dossiers.manager.validation.error.leads.label.en": "Vous n'avez pas configuré d'étiquette de piste en anglais.",
+    "route.dossiers.manager.validation.error.leads.label.fr": "Vous n'avez pas configuré d'étiquette de piste en français.",
+    "route.dossiers.manager.validation.error.leads.format": "Vous n'avez pas défini le format pour la piste '{{label}}'.",
+    "route.dossiers.manager.validation.error.leads.content": "Vous n'avez pas défini le contenu pour la piste '{{label}}'.",
+    "route.dossiers.manager.validation.error.leads.icon": "Il manque une icône, ou l'icône spécifiée n'existe pas pour la piste '{{label}}'.",
     "route.dossiers.manager.validation.error.pivots": "Un pivot est mal configuré.",
-    "route.dossiers.manager.validation.error.pivots.duplicate": "Un pivot a une clé dupliquée.",
+    "route.dossiers.manager.validation.error.pivots.label": "Vous n'avez pas configuré d'étiquette de pivot.",
+    "route.dossiers.manager.validation.error.pivots.label.en": "Vous n'avez pas configuré d'étiquette de pivot en anglais.",
+    "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.format": "Vous n'avez pas défini le format pour le pivot '{{label}}'.",
+    "route.dossiers.manager.validation.error.pivots.value": "Vous n'avez pas défini la valeur pour le pivot '{{label}}'.",
+    "route.dossiers.manager.validation.error.pivots.icon": "Il manque une icône, ou l'icône spécifiée n'existe pas pour le pivot '{{label}}'.",
+    "route.dossiers.manager.validation.error.pivots.duplicate": "Le pivot '{{label}}' a une clé dupliquée.",
+    "route.dossiers.manager.validation.error.pivots.key": "Vous n'avez pas configuré de clé pour un mappage dans le pivot '{{label}}'.",
+    "route.dossiers.manager.validation.error.pivots.field": "Vous n'avez pas configuré de champ ou de valeur personnalisée pour un mappage dans le pivot '{{label}}'.",
     "route.dossiers.manager.validation.error.items": "Vous n'avez pas configuré de pistes ou de pivots.",
     "route.views.create.success": "Vue crée.",
     "route.views.update.success": "Vue actualisée.",

package/package.json

@@ -96,7 +96,7 @@
     "internal-slot": "1.0.7"
   },
   "type": "module",
-  "version": "2.15.0-dev.299",
+  "version": "2.15.0-dev.308",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",