@cccsaurora/howler-ui 3.1.0-dev.1466 → 3.1.0-dev.1602

package/components/routes/dossiers/DossierEditor.js

@@ -2,15 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconExists } from '@iconify/react';
 import { Language, Person, Save } from '@mui/icons-material';
 import { Box, CircularProgress, Fab, Paper, Stack, Tab, Tabs, TextField, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useMediaQuery } from '@mui/material';
+import { PageCenter } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { MembershipManagement } from '@cccsaurora/howler-ui/components/elements/membership/MembershipManagement';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { isEqual, omit, uniqBy } from 'lodash-es';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import QueryResultText from '../../elements/display/QueryResultText';
 import RecordQuery from '../hits/search/RecordQuery';
@@ -23,6 +24,7 @@ const DossierEditor = () => {
     const { showSuccessMessage } = useMySnackbar();
     const navigate = useNavigate();
     const [searchParams, setSearchParams] = useSearchParams();
+    const dossierId = params.id;
     const setQuery = useContextSelector(ParameterContext, ctx => ctx.setQuery);
     const isNarrow = useMediaQuery(`(max-width: ${i18n.language === 'en' ? 1275 : 1375}px)`);
     const [originalDossier, setOriginalDossier] = useState();
@@ -37,6 +39,7 @@ const DossierEditor = () => {
     const [loading, setLoading] = useState(false);
     const dirty = useMemo(() => !isEqual(originalDossier, dossier), [dossier, originalDossier]);
     const validationError = useMemo(() => {
+        const language = i18n.language;
         if (!dossier) {
             return t('route.dossiers.manager.validation.error');
         }
@@ -70,15 +73,21 @@ const DossierEditor = () => {
             }
             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] });
+                return t('route.dossiers.manager.validation.error.leads.format', {
+                    label: lead.label[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] });
+                return t('route.dossiers.manager.validation.error.leads.content', {
+                    label: lead.label[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] });
+                return t('route.dossiers.manager.validation.error.leads.icon', {
+                    label: lead.label[language]
+                });
             }
         }
         for (const pivot of dossier.pivots ?? []) {
@@ -96,30 +105,42 @@ const DossierEditor = () => {
             }
             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] });
+                return t('route.dossiers.manager.validation.error.pivots.format', {
+                    label: pivot.label[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] });
+                return t('route.dossiers.manager.validation.error.pivots.value', {
+                    label: pivot.label[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] });
+                return t('route.dossiers.manager.validation.error.pivots.icon', {
+                    label: pivot.label[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] });
+                return t('route.dossiers.manager.validation.error.pivots.duplicate', {
+                    label: pivot.label[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] });
+                return t('route.dossiers.manager.validation.error.pivots.key', {
+                    label: pivot.label[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 t('route.dossiers.manager.validation.error.pivots.field', {
+                    label: pivot.label[i18n.language]
+                });
             }
         }
         return null;
@@ -127,41 +148,56 @@ const DossierEditor = () => {
     const save = useCallback(async () => {
         setLoading(true);
         try {
-            if (!params.id) {
+            if (!dossierId) {
                 const result = await dispatchApi(api.dossier.post(dossier));
+                if (!result?.dossier_id) {
+                    return;
+                }
                 showSuccessMessage(t('route.dossiers.manager.create.success'));
-                navigate(`/dossiers/${result.dossier_id}/edit`);
+                void navigate(`/dossiers/${result.dossier_id}/edit`);
             }
             else {
-                setDossier(await dispatchApi(api.dossier.put(dossier.dossier_id, omit(dossier, ['dossier_id', 'id']))));
+                const result = await dispatchApi(api.dossier.put(dossierId, omit(dossier, ['dossier_id', 'id', 'owner', 'admins', 'members'])));
+                if (!result) {
+                    return;
+                }
+                setDossier(result);
                 showSuccessMessage(t('route.dossiers.manager.edit.success'));
             }
         }
         finally {
             setLoading(false);
         }
-    }, [dispatchApi, dossier, navigate, params.id, showSuccessMessage, t]);
+    }, [dispatchApi, dossier, dossierId, navigate, showSuccessMessage, t]);
     useEffect(() => {
-        if (!params.id) {
+        if (!dossierId) {
             return;
         }
         setLoading(true);
-        void dispatchApi(api.dossier.get(params.id))
-            .then(_dossier => {
-            setOriginalDossier(_dossier);
-            setDossier(_dossier);
+        void dispatchApi(api.dossier.get(dossierId))
+            .then(fetchedDossier => {
+            if (!fetchedDossier) {
+                return;
+            }
+            setOriginalDossier(fetchedDossier);
+            setDossier(fetchedDossier);
         })
             .finally(() => setLoading(false));
-    }, [dispatchApi, params.id]);
+    }, [dispatchApi, dossierId]);
     useEffect(() => {
-        if (!dossier.query) {
+        const query = dossier.query;
+        if (!query) {
             return;
         }
-        setQuery(dossier.query);
+        setQuery(query);
         void (async () => {
             setLoading(true);
             try {
-                const result = await dispatchApi(api.search.hit.post({ query: dossier.query, rows: 0 }));
+                const result = await dispatchApi(api.search.hit.post({ query, rows: 0 }));
+                if (!result) {
+                    setSearchTotal(-1);
+                    return;
+                }
                 setSearchTotal(result.total);
             }
             finally {
@@ -183,7 +219,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, { 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 => ({
+                            }), 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", alignItems: "center", 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(MembershipManagement, { type: "dossier", entity: dossier, onChange: _dossier => setDossier(_dossier) })] }), _jsx(Typography, { sx: theme => ({
                                             color: theme.palette.text.secondary,
                                             fontSize: '0.9em',
                                             fontStyle: 'italic',

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

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
 import omit from 'lodash-es/omit';
 import { act } from 'react';
 import { setupContextSelectorMock, setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
@@ -55,9 +57,13 @@ vi.mock('@mui/material', async () => {
     };
 });
 // 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('@tui/core', async () => {
+    const actual = await vi.importActual('@tui/core');
+    return {
+        ...actual,
+        PageCenter: ({ 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] }))
 }));
@@ -76,7 +82,7 @@ import ApiConfigProvider from '@cccsaurora/howler-ui/components/app/providers/Ap
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
 import i18n from '@cccsaurora/howler-ui/i18n';
 import { I18nextProvider } from 'react-i18next';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router';
 import DossierEditor from './DossierEditor';
 const mockUseParams = vi.mocked(useParams);
 const mockUseSearchParams = vi.mocked(useSearchParams);
@@ -119,16 +125,17 @@ const Wrapper = ({ children }) => {
                 configuration: {},
                 c12nDef: {},
                 mapping: {}
-            }, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: children }) }) }));
+            }, children: _jsx(ParameterContext.Provider, { value: mockParameterContext, children: _jsx(UserListContext.Provider, { value: { users: {}, fetchUsers: vi.fn(), searchUsers: vi.fn() }, children: children }) }) }) }));
 };
 describe('DossierEditor', () => {
     beforeEach(() => {
-        mockApiSearchHitPost.mockClear();
-        mockApiDossierGet.mockClear();
-        mockApiDossierPost.mockClear();
-        mockApiDossierPut.mockClear();
+        mockApiSearchHitPost.mockReset();
+        mockApiDossierGet.mockReset();
+        mockApiDossierPost.mockReset();
+        mockApiDossierPut.mockReset();
         mockNavigate.mockClear();
         mockSetQuery.mockClear();
+        mockUseParams.mockReturnValue({ id: undefined });
         // Reset mock context
         mockParameterContext.setQuery = mockSetQuery;
         // Default mock implementations

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

@@ -1,2 +1,2 @@
-declare const Dossiers: () => import("react/jsx-runtime").JSX.Element;
+declare const Dossiers: () => import("react").JSX.Element;
 export default Dossiers;

package/components/routes/dossiers/Dossiers.js

@@ -3,7 +3,7 @@ import { Topic } from '@mui/icons-material';
 import { Typography } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
 import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
-import SearchResponseProvider, { SearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
+import SearchResponseProvider, { createSearchResponseContext, useSearchResponseContext } from '@cccsaurora/howler-ui/components/app/providers/SearchResponseProvider';
 import { TuiListProvider } from '@cccsaurora/howler-ui/components/elements/addons/lists';
 import { TuiListMethodContext } from '@cccsaurora/howler-ui/components/elements/addons/lists/TuiListProvider';
 import ItemManager from '@cccsaurora/howler-ui/components/elements/display/ItemManager';
@@ -12,9 +12,10 @@ import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/us
 import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import DossierCard from './DossierCard';
+const SearchResponseContext = createSearchResponseContext();
 const DossiersBase = () => {
     const { t } = useTranslation();
     const navigate = useNavigate();
@@ -24,7 +25,7 @@ const DossiersBase = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const { load } = useContext(TuiListMethodContext);
     const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
-    const { response, request, remove, getSearchRequestData } = useContext(SearchResponseContext);
+    const { response, request, remove, getSearchRequestData } = useSearchResponseContext(SearchResponseContext);
     const [phrase, setPhrase] = useState('');
     const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
     const [hasError, setHasError] = useState(false);
@@ -101,7 +102,7 @@ const DossiersBase = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     useEffect(() => {
-        if (response?.total <= offset) {
+        if ((response?.total ?? 0) <= offset) {
             setOffset(0);
             searchParams.set('offset', '0');
             setSearchParams(searchParams, { replace: true });
@@ -117,6 +118,6 @@ const DossiersBase = () => {
     return (_jsx(ItemManager, { onSearch: onSearch, onPageChange: onPageChange, phrase: phrase, setPhrase: setPhrase, hasError: hasError, searching: loading, aboveSearch: _jsx(Typography, { sx: theme => ({ fontStyle: 'italic', color: theme.palette.text.disabled, mb: 0.5 }), variant: "body2", children: t('route.dossiers.search.prompt') }), renderer: ({ item }, classRenderer) => renderer(item.item, classRenderer()), response: response, onSelect: (item) => navigate(`/dossiers/${item.id}/edit`), onCreate: () => navigate('/dossiers/create'), createPrompt: "route.dossiers.create", searchPrompt: "route.dossiers.manager.search", createIcon: _jsx(Topic, { sx: { mr: 1 } }) }));
 };
 const Dossiers = () => {
-    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { idField: "dossier_id", children: _jsx(DossiersBase, {}) }) }));
+    return (_jsx(TuiListProvider, { children: _jsx(SearchResponseProvider, { context: SearchResponseContext, idField: "dossier_id", children: _jsx(DossiersBase, {}) }) }));
 };
 export default Dossiers;

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

@@ -8,6 +8,6 @@ export interface LeadFormProps {
 }
 declare const LeadEditor: FC<{
     lead?: Lead;
-    update: (lead: Partial<Lead>) => void;
+    update: (lead: Partial<Lead> | null) => void;
 }>;
 export default LeadEditor;

package/components/routes/dossiers/LeadEditor.js

@@ -16,7 +16,7 @@ const LeadEditor = ({ lead, update }) => {
     const pluginStore = usePluginStore();
     const icon = useMemo(() => lead?.icon ?? 'material-symbols:find-in-page', [lead?.icon]);
     const metadata = useMemo(() => JSON.parse(lead?.metadata ?? '{}'), [lead?.metadata]);
-    const updateMetadata = useCallback(_metadata => {
+    const updateMetadata = useCallback((_metadata) => {
         update({ metadata: JSON.stringify(merge({}, metadata, _metadata)) });
     }, [metadata, update]);
     useEffect(() => {
@@ -25,7 +25,7 @@ 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 }, 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 &&
+    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: format ?? undefined, 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,

package/components/routes/dossiers/LeadForm.js

@@ -6,7 +6,7 @@ import isNull from 'lodash-es/isNull';
 import merge from 'lodash-es/merge';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import LeadEditor from './LeadEditor';
 const LeadForm = ({ dossier, setDossier, loading }) => {
     const { t, i18n } = useTranslation();
@@ -34,7 +34,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.label?.en + lead.content))) })), _jsx(Button, { id: "add-lead", 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.d.ts

@@ -3,7 +3,7 @@ import type { Pivot } from '@cccsaurora/howler-ui/models/entities/generated/Pivo
 import { type Dispatch, type FC, type SetStateAction } from 'react';
 export interface PivotFormProps {
     pivot: Pivot;
-    update: (pivot: Partial<Pivot>) => void;
+    update: (pivot?: Partial<Pivot>) => void;
 }
 declare const PivotForm: FC<{
     dossier: Dossier;

package/components/routes/dossiers/PivotForm.js

@@ -3,20 +3,21 @@ 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 { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
-import isNull from 'lodash-es/isNull';
+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 { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 const LinkForm = ({ pivot, update }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
     return (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.value'), disabled: !pivot, value: pivot?.value ?? '', fullWidth: true, onChange: ev => update({ value: ev.target.value }) }), _jsx(Divider, { flexItem: true }), _jsx(Typography, { children: t('route.dossiers.manager.pivot.mappings') }), pivot?.mappings?.map((_mapping, index) => (_jsxs(Fragment, { children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { size: "small", label: t('route.dossiers.manager.pivot.mapping.key'), disabled: !pivot, value: _mapping?.key ?? '', onChange: ev => update({
                                     mappings: pivot.mappings.map((_m, _index) => index === _index ? { ..._m, key: ev.target.value } : _m)
-                                }) }), _jsx(Autocomplete, { fullWidth: true, disabled: !pivot, options: ['custom', ...Object.keys(config.indexes.hit)], renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: t('route.dossiers.manager.pivot.mapping.field'), sx: { minWidth: '150px' } })), getOptionLabel: opt => t(opt), value: _mapping.field ?? '', onChange: (_ev, field) => update({
-                                    mappings: pivot.mappings.map((_m, _index) => (index === _index ? { ..._m, field } : _m))
+                                }) }), _jsx(Autocomplete, { fullWidth: true, disabled: !pivot, options: ['custom', ...Object.keys(config.indexes?.hit ?? {})], renderInput: params => (_jsx(TextField, { ...params, size: "small", fullWidth: true, label: t('route.dossiers.manager.pivot.mapping.field'), sx: { minWidth: '150px' } })), getOptionLabel: opt => t(opt), value: _mapping.field ?? '', onChange: (_ev, field) => update({
+                                    mappings: pivot.mappings.map((_m, _index) => index === _index ? { ..._m, field: field ?? undefined } : _m)
                                 }) }), _jsx(IconButton, { onClick: () => 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({
@@ -40,8 +41,8 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
             if (tab !== _index) {
                 return pivot;
             }
-            if (isNull(data)) {
-                return null;
+            if (isNil(data)) {
+                return;
             }
             const merged = merge({}, pivot, data);
             if (data.mappings) {
@@ -49,9 +50,9 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
             }
             return merged;
         })
-            .filter(_pivot => !isNull(_pivot))
+            .filter(notNil)
     })), [setDossier, tab]);
-    const pivot = useMemo(() => dossier.pivots?.[tab] ?? null, [dossier.pivots, tab]);
+    const pivot = useMemo(() => dossier.pivots?.[tab], [dossier.pivots, tab]);
     const icon = useMemo(() => pivot?.icon ?? 'material-symbols:find-in-page', [pivot?.icon]);
     useEffect(() => {
         searchParams.delete('lead');
@@ -84,7 +85,7 @@ const PivotForm = ({ dossier, setDossier, loading }) => {
                                         { icon: 'material-symbols:add-ad', 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(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.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, 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, { 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 &&
                             (pivot.format === 'link' ? (_jsx(LinkForm, { pivot: pivot, update: update })) : (pluginStore.executeFunction(`pivot.${pivot.format}.form`, { pivot, update })))] })] }) }));
 };
 export default PivotForm;

package/components/routes/events/EventViewer.js

@@ -16,7 +16,7 @@ const EventViewer = ({ event: provided, eventId }) => {
         if (eventId) {
             void dispatchApi(api.v2.search.post('event', { query: `howler.id:${eventId}`, rows: 1 }), {
                 throwError: false
-            }).then(res => setEvent(res.items[0]));
+            }).then(res => setEvent(res?.items[0] ?? null));
         }
     }, [dispatchApi, eventId]);
     return _jsx(Box, { p: 1, children: event ? _jsx(ObjectDetails, { obj: event }) : _jsx(Skeleton, { height: 120 }) });

package/components/routes/help/ActionDocumentation.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageCenter } from '@tui/core';
 import { Box, Stack, Tab, Typography, useMediaQuery, useTheme } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import ActionIntroductionDocumentation from './ActionIntroductionDocumentation';
 import HelpTabs from './components/HelpTabs';
 const ActionDocumentation = () => {

package/components/routes/help/ActionIntroductionDocumentation.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppUser } from '@tui/core';
 import { Close, Search } from '@mui/icons-material';
 import { IconButton, ListItemText, MenuItem, Select, Stack } from '@mui/material';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import { difference } from 'lodash-es';
@@ -25,7 +25,7 @@ const ActionIntroductionDocumentation = () => {
     useEffect(() => {
         api.action.operations
             .get()
-            .then(_operations => _operations.filter(a => difference(a.roles, user.roles).length < a.roles.length))
+            .then(_operations => _operations.filter(a => difference(a.roles, user.roles ?? []).length < a.roles.length))
             .then(setOperations)
             // eslint-disable-next-line no-console
             .catch(console.debug);

package/components/routes/help/ApiDocumentation.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Help } from '@mui/icons-material';
 import { Chip, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { PageCenter, useAppUser } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
@@ -23,7 +22,7 @@ const ApiDocumentation = () => {
     const theme = useTheme();
     useScrollRestoration();
     const isLg = useMediaQuery(theme.breakpoints.down('lg'));
-    const [data, setData] = useState(null);
+    const [data, setData] = useState();
     useEffect(() => {
         void dispatchApi(api.help.get()).then(setData);
     }, [dispatchApi]);
@@ -49,7 +48,7 @@ const ApiDocumentation = () => {
                                             .replace(/(\S+)\s+=>\s+(.+)/g, '\n`$1`: $2\n')
                                             .replace(/(Data Block:\n)([\s\S]+)(Result Example:)/, (__, p1, p2, p3) => `${p1}\`\`\`\n${p2.trim()}\n\`\`\`\n${p3}`)
                                             .replace(/(Result Example:\n)([\s\S]+)$/, (__, p1, p2) => `${p1}\`\`\`\n${p2.trim()}\n\`\`\``) }));
-                                    return (_jsxs(Fragment, { children: [_jsxs(TableRow, { style: { marginBottom: '1rem' }, sx: [isLg && { '& > td': { borderBottom: 0 } }], children: [_jsx(TableCell, { children: _jsxs(Stack, { direction: "column", spacing: 1, alignItems: "start", children: [_jsx(Typography, { children: endpoint.name }), _jsx("code", { children: endpoint.path }), _jsxs(Stack, { direction: "row", spacing: 1, children: [endpoint.complete ? (_jsx(Chip, { label: "Stable", color: "success" })) : (_jsx(Chip, { label: "Unstable", color: "error" })), endpoint.protected ? (_jsx(Chip, { label: "Protected", color: "warning" })) : (_jsx(Chip, { label: "Unprotected" }))] }), _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.methods.map(m => (_jsx(Chip, { size: "small", label: m }, m))) }), endpoint.ui_only && _jsx(Chip, { label: "UI Only" })] }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_type.map(type => (_jsx(Chip, { size: "small", label: type, color: user.roles?.includes(type) ? 'success' : 'default' }, type))) }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_priv.map((p) => (_jsx(Chip, { size: "small", label: t(APIKEY_LABELS[p]) }, p))) }) }), !isLg && _jsx(TableCell, { children: documentationCell })] }), isLg && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { '& pre': { whiteSpace: 'pre-wrap' } }, children: documentationCell }) }))] }, endpoint.id));
+                                    return (_jsxs(Fragment, { children: [_jsxs(TableRow, { style: { marginBottom: '1rem' }, sx: [isLg && { '& > td': { borderBottom: 0 } }], children: [_jsx(TableCell, { children: _jsxs(Stack, { direction: "column", spacing: 1, alignItems: "start", children: [_jsx(Typography, { children: endpoint.name }), _jsx("code", { children: endpoint.path }), _jsxs(Stack, { direction: "row", spacing: 1, children: [endpoint.complete ? (_jsx(Chip, { label: "Stable", color: "success" })) : (_jsx(Chip, { label: "Unstable", color: "error" })), endpoint.protected ? (_jsx(Chip, { label: "Protected", color: "warning" })) : (_jsx(Chip, { label: "Unprotected" }))] }), _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.methods.map(m => (_jsx(Chip, { size: "small", label: m }, m))) }), endpoint.ui_only && _jsx(Chip, { label: "UI Only" })] }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_type.map(type => (_jsx(Chip, { size: "small", label: type, color: user.roles?.includes(type) ? 'success' : 'default' }, type))) }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_priv.map(p => (_jsx(Chip, { size: "small", label: t(APIKEY_LABELS[p]) }, p))) }) }), !isLg && _jsx(TableCell, { children: documentationCell })] }), isLg && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { '& pre': { whiteSpace: 'pre-wrap' } }, children: documentationCell }) }))] }, endpoint.id));
                                 }) })] }) })] }) }));
 };
 export default ApiDocumentation;

package/components/routes/help/AuthDocumentation.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { PageCenter } from '@tui/core';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
 import { useMemo } from 'react';

package/components/routes/help/ClientDocumentation.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { PageCenter } from '@tui/core';
 import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';

package/components/routes/help/Help.d.ts

@@ -1,2 +1,2 @@
-declare const HelpDashboard: () => import("react/jsx-runtime").JSX.Element;
+declare const HelpDashboard: () => import("react").JSX.Element;
 export default HelpDashboard;

package/components/routes/help/Help.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HelpCenter, OpenInNew } from '@mui/icons-material';
 import { Button, Card, CardActions, CardContent, CardHeader, Divider, Grid, IconButton, Stack, Typography } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { PageCenter } from '@tui/core';
 import useMyPreferences from '@cccsaurora/howler-ui/components/hooks/useMyPreferences';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { usePluginStore } from 'react-pluggable';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 const HelpDashboard = () => {
     const { t } = useTranslation(['translation', 'helpMain']);
     const { leftnav } = useMyPreferences();
@@ -18,7 +18,8 @@ const HelpDashboard = () => {
         'help.hit': ['schema', 'header', 'bundle', 'links'],
         'help.actions': ['introduction', ...howlerPluginStore.operations]
     }), []);
-    const links = useMemo(() => leftnav.elements.find(el => el.type === 'group' && el.element.id === 'help').element.items.filter(_item => _item.id !== 'help.main'), [leftnav.elements]);
-    return (_jsx(PageCenter, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Typography, { variant: "h3", sx: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx(HelpCenter, { fontSize: "inherit", sx: { mr: 1 } }), _jsx("span", { children: t('page.help.title') })] }), _jsx(Divider, { sx: theme => ({ marginLeft: `${theme.spacing(1)} !important` }) }), _jsx(Grid, { container: true, spacing: 1, sx: { pr: 1 }, children: links.map(link => (_jsx(Grid, { item: true, xs: 12, md: 3, sx: { display: 'flex' }, children: _jsxs(Card, { sx: { flex: 1, display: 'flex', flexDirection: 'column' }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", alignItems: "center", sx: { '& svg': { fontSize: 'inherit' }, '& > span': { ml: 1 } }, children: [link.icon, _jsx("span", { children: t(link.i18nKey) }), _jsx(IconButton, { component: Link, to: link.route, sx: { ml: 'auto' }, children: _jsx(OpenInNew, { color: "primary", fontSize: "inherit" }) })] }) }), _jsx(CardContent, { sx: { flex: 1 }, children: _jsx(Typography, { children: t(`helpMain:${link.i18nKey}.description`) }) }), tabs[link.id] && (_jsx(CardActions, { children: tabs[link.id].map(tab => (_jsx(Button, { size: "small", component: Link, to: `${link.route}?tab=${tab}`, children: tab }, tab))) }))] }) }, link.id))) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.help`))] }) }));
+    const links = (leftnav?.menus?.find(menu => menu.id === 'help')?.items?.filter(_item => _item.id !== 'help.main') ??
+        []);
+    return (_jsx(PageCenter, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: _jsxs(Stack, { spacing: 1, children: [_jsxs(Typography, { variant: "h3", sx: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx(HelpCenter, { fontSize: "inherit", sx: { mr: 1 } }), _jsx("span", { children: t('page.help.title') })] }), _jsx(Divider, { sx: theme => ({ marginLeft: `${theme.spacing(1)} !important` }) }), _jsx(Grid, { container: true, spacing: 1, sx: { pr: 1 }, children: links.map(link => (_jsx(Grid, { size: { xs: 12, md: 3 }, sx: { display: 'flex' }, children: _jsxs(Card, { sx: { flex: 1, display: 'flex', flexDirection: 'column' }, children: [_jsx(CardHeader, { title: _jsxs(Stack, { direction: "row", alignItems: "center", sx: { '& svg': { fontSize: 'inherit' }, '& > span': { ml: 1 } }, children: [link.icon, link.i18nKey && _jsx("span", { children: t(link.i18nKey) }), _jsx(IconButton, { component: Link, to: link.route, sx: { ml: 'auto' }, children: _jsx(OpenInNew, { color: "primary", fontSize: "inherit" }) })] }) }), _jsx(CardContent, { sx: { flex: 1 }, children: _jsx(Typography, { children: t(`helpMain:${link.i18nKey}.description`) }) }), tabs[link.id] && (_jsx(CardActions, { children: tabs[link.id].map((tab) => (_jsx(Button, { size: "small", component: Link, to: `${link.route}?tab=${tab}`, children: tab }, tab))) }))] }) }, link.id))) }), howlerPluginStore.plugins.map(plugin => pluginStore.executeFunction(`${plugin}.help`))] }) }));
 };
 export default HelpDashboard;

package/components/routes/help/HitDocumentation.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Stack, Tab, Typography, useMediaQuery, useTheme } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { PageCenter } from '@tui/core';
 import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import HelpTabs from './components/HelpTabs';
 import HitBannerDocumentation from './HitBannerDocumentation';
 import HitLabelsDocumentation from './HitLabelsDocumentation';
@@ -16,7 +16,7 @@ const HitDocumentation = () => {
     const useHorizontal = useMediaQuery(theme.breakpoints.down(1700));
     useScrollRestoration();
     const [searchParams, setSearchParams] = useSearchParams();
-    const [tab, setTab] = useState(searchParams.get('tab') ?? 'schema');
+    const [tab, setTab] = useState((searchParams.get('tab') ?? 'schema'));
     const onChange = useCallback((_tab) => {
         setTab(_tab);
         searchParams.set('tab', _tab);