@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.271

package/components/routes/dossiers/Dossiers.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Topic } from '@mui/icons-material';
+import { Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+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';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+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 { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+import DossierCard from './DossierCard';
+const DossiersBase = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { dispatchApi } = useMyApi();
+    const { showSuccessMessage } = useMySnackbar();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { load } = useContext(TuiListMethodContext);
+    const pageCount = useMyLocalStorageItem(StorageKey.PAGE_COUNT, 25)[0];
+    const [phrase, setPhrase] = useState('');
+    const [offset, setOffset] = useState(parseInt(searchParams.get('offset')) || 0);
+    const [response, setResponse] = useState(null);
+    const [hasError, setHasError] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const onSearch = useCallback(async () => {
+        try {
+            setLoading(true);
+            setHasError(false);
+            if (phrase) {
+                searchParams.set('phrase', phrase);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams, { replace: true });
+            // Check for the actual search query
+            const query = phrase ? `*:*${phrase}*` : '*:*';
+            // Ensure the overview should be visible and/or matches the type we are filtering for
+            setResponse(await dispatchApi(api.search.dossier.post({
+                query,
+                rows: pageCount,
+                offset
+            })));
+        }
+        catch (e) {
+            setHasError(true);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [phrase, setSearchParams, searchParams, dispatchApi, pageCount, offset]);
+    // Load the items into list when response changes.
+    // This hook should only trigger when the 'response' changes.
+    useEffect(() => {
+        if (response) {
+            load(response.items.map((item) => ({
+                id: item.dossier_id,
+                item,
+                selected: false,
+                cursor: false
+            })));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [response, load]);
+    const onPageChange = useCallback((_offset) => {
+        if (_offset !== offset) {
+            searchParams.set('offset', _offset.toString());
+            setSearchParams(searchParams, { replace: true });
+            setOffset(_offset);
+        }
+    }, [offset, searchParams, setSearchParams]);
+    const onDelete = useCallback(async (e, id) => {
+        e.preventDefault();
+        e.stopPropagation();
+        try {
+            await dispatchApi(api.dossier.del(id), { throwError: false, showError: true });
+            await onSearch();
+            showSuccessMessage(t('route.dossiers.manager.delete.success'));
+        }
+        catch (_err) {
+            // eslint-disable-next-line no-console
+            console.warn(_err);
+        }
+    }, [dispatchApi, onSearch, showSuccessMessage, t]);
+    useEffect(() => {
+        onSearch();
+        if (!searchParams.has('offset')) {
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (response?.total <= offset) {
+            setOffset(0);
+            searchParams.set('offset', '0');
+            setSearchParams(searchParams, { replace: true });
+        }
+    }, [offset, response?.total, searchParams, setSearchParams]);
+    useEffect(() => {
+        if (!loading) {
+            onSearch();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [offset]);
+    const renderer = useCallback((item, className) => _jsx(DossierCard, { dossier: item, className: className, onDelete: onDelete }), [onDelete]);
+    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(DossiersBase, {}) }));
+};
+export default Dossiers;

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

@@ -0,0 +1,13 @@
+import type { Lead } from '@cccsaurora/howler-ui/models/entities/generated/Lead';
+import { type FC } from 'react';
+export interface LeadFormProps {
+    lead?: Lead;
+    metadata?: any;
+    update: (lead: Partial<Lead>) => void;
+    updateMetadata: (data: any) => void;
+}
+declare const LeadEditor: FC<{
+    lead?: Lead;
+    update: (lead: Partial<Lead>) => void;
+}>;
+export default LeadEditor;

package/components/routes/dossiers/LeadEditor.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, iconExists } from '@iconify/react/dist/iconify.js';
+import { useMonaco } from '@monaco-editor/react';
+import { Delete, OpenInNew } from '@mui/icons-material';
+import { Autocomplete, Button, IconButton, Stack, TextField, Typography, useTheme } from '@mui/material';
+import ThemedEditor from '@cccsaurora/howler-ui/components/elements/ThemedEditor';
+import { merge } from 'lodash-es';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+const LeadEditor = ({ lead, update }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const monaco = useMonaco();
+    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 => {
+        update({ metadata: JSON.stringify(merge({}, metadata, _metadata)) });
+    }, [metadata, update]);
+    useEffect(() => {
+        if (!monaco) {
+            return;
+        }
+        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`, {
+                    lead,
+                    metadata,
+                    update,
+                    updateMetadata
+                })))] }));
+};
+export default LeadEditor;

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

@@ -0,0 +1,8 @@
+import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
+import { type Dispatch, type FC, type SetStateAction } from 'react';
+declare const LeadForm: FC<{
+    dossier: Dossier;
+    setDossier: Dispatch<SetStateAction<Partial<Dossier>>>;
+    loading: boolean;
+}>;
+export default LeadForm;

package/components/routes/dossiers/LeadForm.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Add } from '@mui/icons-material';
+import { Alert, Button, Paper, Stack, Tab, Tabs } from '@mui/material';
+import isNull from 'lodash-es/isNull';
+import merge from 'lodash-es/merge';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+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: {
+                            mr: 1,
+                            px: 1,
+                            py: 0,
+                            minHeight: '0 !important',
+                            display: 'flex',
+                            alignItems: 'center',
+                            '& .MuiAlert-icon ': {
+                                fontSize: '20px',
+                                py: 0
+                            },
+                            '& .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: () => {
+                            setTab(dossier.leads?.length ?? 0);
+                            setDossier(_dossier => ({
+                                ..._dossier,
+                                leads: [
+                                    ...(_dossier.leads ?? []),
+                                    { icon: 'material-symbols:add-ad', label: { en: 'New Lead', fr: 'Nouvelle Piste' } }
+                                ]
+                            }));
+                        }, children: _jsx(Add, {}) })] }), _jsx(LeadEditor, { lead: (dossier.leads ?? [])[tab], update: data => setDossier(_dossier => ({
+                    ..._dossier,
+                    leads: (_dossier.leads ?? [])
+                        .map((lead, index) => {
+                        if (index !== tab) {
+                            return lead;
+                        }
+                        if (isNull(data)) {
+                            return null;
+                        }
+                        return merge({}, lead, data);
+                    })
+                        .filter(_lead => !isNull(_lead))
+                })) })] }));
+};
+export default LeadForm;

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

@@ -0,0 +1,13 @@
+import type { Dossier } from '@cccsaurora/howler-ui/models/entities/generated/Dossier';
+import type { Pivot } from '@cccsaurora/howler-ui/models/entities/generated/Pivot';
+import { type Dispatch, type FC, type SetStateAction } from 'react';
+export interface PivotFormProps {
+    pivot: Pivot;
+    update: (pivot: Partial<Pivot>) => void;
+}
+declare const PivotForm: FC<{
+    dossier: Dossier;
+    setDossier: Dispatch<SetStateAction<Partial<Dossier>>>;
+    loading: boolean;
+}>;
+export default PivotForm;

package/components/routes/dossiers/PivotForm.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon, iconExists } from '@iconify/react/dist/iconify.js';
+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 merge from 'lodash-es/merge';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import { Fragment, useCallback, useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePluginStore } from 'react-pluggable';
+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) => (
+            // eslint-disable-next-line react/no-array-index-key
+            _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(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({
+                            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: () => {
+                    update({
+                        mappings: [...(pivot.mappings ?? []), { key: 'key' }]
+                    });
+                }, children: _jsx(Add, {}) })] }));
+};
+const PivotForm = ({ dossier, setDossier, loading }) => {
+    const theme = useTheme();
+    const { t, i18n } = useTranslation();
+    const pluginStore = usePluginStore();
+    const [tab, setTab] = useState(0);
+    const update = useCallback((data) => setDossier(_dossier => ({
+        ..._dossier,
+        pivots: (_dossier.pivots ?? [])
+            .map((pivot, _index) => {
+            if (tab !== _index) {
+                return pivot;
+            }
+            if (isNull(data)) {
+                return null;
+            }
+            const merged = merge({}, pivot, data);
+            if (data.mappings) {
+                merged.mappings = data.mappings;
+            }
+            return merged;
+        })
+            .filter(_pivot => !isNull(_pivot))
+    })), [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: {
+                                mr: 1,
+                                px: 1,
+                                py: 0,
+                                minHeight: '0 !important',
+                                display: 'flex',
+                                alignItems: 'center',
+                                '& .MuiAlert-icon ': {
+                                    fontSize: '20px',
+                                    py: 0
+                                },
+                                '& .MuiAlert-message': {
+                                    py: 0.7
+                                }
+                            }, children: t('route.dossiers.manager.pivot.create') })) : (_jsx(Tabs, { value: tab, onChange: (_, _tab) => setTab(_tab), sx: { minHeight: '0 !important' }, children: dossier.pivots?.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.value))) })), _jsx(Button, { sx: { ml: 'auto', alignSelf: 'end', minWidth: '0 !important' }, size: "small", variant: "contained", onClick: () => {
+                                setTab(dossier.pivots?.length ?? 0);
+                                setDossier(_dossier => ({
+                                    ..._dossier,
+                                    pivots: [
+                                        ...(_dossier.pivots ?? []),
+                                        { icon: 'material-symbols:add-ad', label: { en: 'New Pivot', fr: 'Nouvelle pivot' } }
+                                    ]
+                                }));
+                            }, 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 ?? '', onChange: (_ev, format) => update({ format, 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/help/ActionDocumentation.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+export interface PluginDocumentation {
+    id: string;
+    i18nKey: string;
+    component: () => React.ReactNode;
+}
+declare const ActionDocumentation: FC;
+export default ActionDocumentation;

package/components/routes/help/ActionDocumentation.js

@@ -0,0 +1,31 @@
+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 { 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 ActionIntroductionDocumentation from './ActionIntroductionDocumentation';
+import HelpTabs from './components/HelpTabs';
+const ActionDocumentation = () => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const pluginStore = usePluginStore();
+    useScrollRestoration();
+    const useHorizontal = useMediaQuery(theme.breakpoints.down(1700));
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [tab, setTab] = useState(searchParams.get('tab') ?? 'introduction');
+    const onChange = useCallback((_tab) => {
+        setTab(_tab);
+        searchParams.set('tab', _tab);
+        setSearchParams(new URLSearchParams(searchParams));
+    }, [searchParams, setSearchParams]);
+    const pluginDocumentation = useMemo(() => howlerPluginStore.operations.map(operation => pluginStore.executeFunction(`operation.${operation}.documentation`)), [pluginStore]);
+    return (_jsx(PageCenter, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: _jsxs(Stack, { sx: { flexDirection: useHorizontal ? 'column' : 'row', '& h1': { mt: 0 } }, children: [_jsxs(HelpTabs, { value: tab, children: [_jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.actions.introduction') }), value: "introduction", onClick: () => onChange('introduction') }), pluginDocumentation.map(entry => (_jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t(entry.i18nKey) }), value: entry.id, onClick: () => onChange(entry.id) }, entry.id)))] }), _jsx(Box, { children: {
+                        introduction: () => _jsx(ActionIntroductionDocumentation, {}),
+                        ...Object.fromEntries(pluginDocumentation.map(entry => [entry.id, entry.component]))
+                    }[tab]() })] }) }));
+};
+export default ActionDocumentation;

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

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+declare const ActionIntroductionDocumentation: FC;
+export default ActionIntroductionDocumentation;

package/components/routes/help/ActionIntroductionDocumentation.js

@@ -0,0 +1,61 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { VALID_ACTION_TRIGGERS } from '@cccsaurora/howler-ui/utils/constants';
+import QueryResultText from '../../elements/display/QueryResultText';
+import ActionReportDisplay from '../action/shared/ActionReportDisplay';
+import OperationStep from '../action/shared/OperationStep';
+import ACTION_INTRO_EN from './markdown/en/actionIntroduction.md';
+import ACTION_INTRO_FR from './markdown/fr/actionIntroduction.md';
+const OPERATION_VALUES = {
+    category: 'generic',
+    label: 'Some Label Value'
+};
+const ActionIntroductionDocumentation = () => {
+    const { i18n, t } = useTranslation();
+    const { user } = useAppUser();
+    const [operations, setOperations] = useState([]);
+    useEffect(() => {
+        api.action.operations
+            .get()
+            .then(_operations => _operations.filter(a => difference(a.roles, user.roles).length < 1))
+            .then(setOperations)
+            // eslint-disable-next-line no-console
+            .catch(console.debug);
+    }, [user.roles]);
+    const md = useMemo(() => (i18n.language === 'en' ? ACTION_INTRO_EN : ACTION_INTRO_FR), [i18n.language]);
+    return (_jsx(Markdown, { md: md, components: {
+            action_count: _jsx(_Fragment, { children: operations.length }),
+            action_list: (_jsx("ul", { children: operations.map(operation => (_jsxs("li", { children: [t(`operations.${operation.id}`), " - ", operation.description.short] }, operation.id))) })),
+            tui_phrase: (_jsxs(Stack, { spacing: 1, children: [_jsx(Phrase, { onChange: () => { }, fullWidth: true, autoComplete: "off", value: "howler.id:*", startAdornment: _jsx(IconButton, { children: _jsx(Search, {}) }), endAdornment: _jsx(IconButton, { children: _jsx(Close, {}) }) }), _jsx(QueryResultText, { count: 134, query: "howler.id:*" })] })),
+            operation_select: (_jsx(Select, { value: "add_label", size: "small", children: operations.map(_a => (_jsx(MenuItem, { value: _a.id, children: _jsx(ListItemText, { primary: _a.i18nKey ? t(_a.i18nKey) : _a.title, secondary: _a.description?.short }) }, _a.id))) })),
+            operation_configuration: (_jsx(_Fragment, { children: operations
+                    .find(operation => operation.id === 'add_label')
+                    ?.steps.map(step => (_jsx(OperationStep, { step: step, query: "howler.id:*", values: JSON.stringify(OPERATION_VALUES), setValues: () => { } }, Object.keys(step.args).join('')))) })),
+            report: (_jsx(ActionReportDisplay, { report: {
+                    add_label: [
+                        {
+                            query: 'howler.id:*',
+                            outcome: 'skipped',
+                            title: 'Skipped Hit with Label',
+                            message: `These hits already have the label ${OPERATION_VALUES.label}.`
+                        },
+                        {
+                            query: 'howler.id:*',
+                            outcome: 'success',
+                            title: 'Executed Successfully',
+                            message: `Label '${OPERATION_VALUES.label}' added to category '${OPERATION_VALUES.category}' for all matching hits.`
+                        }
+                    ]
+                }, operations: operations })),
+            automation_options: (_jsx(_Fragment, { children: VALID_ACTION_TRIGGERS.map(trigger => t(`route.actions.trigger.${trigger}`)).join(', ') }))
+        } }));
+};
+export default ActionIntroductionDocumentation;

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

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+declare const ApiDocumentation: FC;
+export default ApiDocumentation;

package/components/routes/help/ApiDocumentation.js

@@ -0,0 +1,55 @@
+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 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';
+import { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Fragment } from 'react/jsx-runtime';
+const APIKEY_LABELS = {
+    R: '@cccsaurora/howler-ui/apikey.read',
+    W: '@cccsaurora/howler-ui/apikey.write',
+    E: '@cccsaurora/howler-ui/apikey.extended',
+    I: '@cccsaurora/howler-ui/apikey.impersonate'
+};
+const ApiDocumentation = () => {
+    const { t } = useTranslation();
+    const { user } = useAppUser();
+    const { dispatchApi } = useMyApi();
+    const theme = useTheme();
+    useScrollRestoration();
+    const isLg = useMediaQuery(theme.breakpoints.down('lg'));
+    const [data, setData] = useState(null);
+    useEffect(() => {
+        dispatchApi(api.help.get()).then(setData);
+    }, [dispatchApi]);
+    if (!data) {
+        return (_jsx(PageCenter, { margin: 4, maxWidth: "1750px", width: "100%", textAlign: "left", children: t('loading') }));
+    }
+    return (_jsx(PageCenter, { margin: 4, maxWidth: "1750px", width: "100%", textAlign: "left", children: _jsxs(Stack, { spacing: 2, children: [_jsx(Typography, { variant: "h4", children: t('page.documentation.categories') }), _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { sx: { '& td': { verticalAlign: 'top' }, '& tr:last-of-type > td': { border: 0 } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('page.documentation.categories.category') }), _jsx(TableCell, { children: t('page.documentation.categories.description') })] }) }), _jsx(TableBody, { children: Object.keys(data.blueprints).map(key => (_jsxs(TableRow, { sx: { width: '100%' }, children: [_jsx(TableCell, { children: _jsx("code", { children: key }) }), _jsx(TableCell, { children: data.blueprints[key] })] }, key))) })] }) }), _jsx(Typography, { variant: "h4", sx: { pt: 4 }, children: t('page.documentation.endpoints') }), _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { sx: {
+                            '& td': { verticalAlign: 'top' },
+                            '& tr:last-of-type > td': { border: 0 },
+                            '& pre': {
+                                backgroundColor: 'background.paper',
+                                padding: 0.75,
+                                borderRadius: '5px'
+                            },
+                            '& :not(pre) > code': {
+                                backgroundColor: 'background.paper',
+                                padding: 0.75,
+                                borderRadius: '5px'
+                            }
+                        }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(Tooltip, { placement: "top-start", title: _jsx(Trans, { i18nKey: "page.documentation.endpoint.explanation" }), children: _jsxs(TableCell, { children: [t('page.documentation.endpoint'), _jsx(Help, { sx: { height: '16px', width: '16px', ml: 1 } })] }) }), _jsx(Tooltip, { placement: "top-start", title: _jsx(Trans, { i18nKey: "page.documentation.required_type.explanation" }), children: _jsxs(TableCell, { children: [t('page.documentation.required_type'), _jsx(Help, { sx: { height: '16px', width: '16px', ml: 1 } })] }) }), _jsx(Tooltip, { placement: "top-start", title: _jsx(Trans, { i18nKey: "page.documentation.required_priv.explanation" }), children: _jsxs(TableCell, { children: [t('page.documentation.required_priv'), _jsx(Help, { sx: { height: '16px', width: '16px', ml: 1 } })] }) }), !isLg && (_jsx(Tooltip, { placement: "top-start", title: _jsx(Trans, { i18nKey: "page.documentation.description.explanation" }), children: _jsxs(TableCell, { children: [t('page.documentation.description'), _jsx(Help, { sx: { height: '16px', width: '16px', ml: 1 } })] }) }))] }) }), _jsx(TableBody, { children: data.apis.map(endpoint => {
+                                    const documentationCell = (_jsx(Markdown, { md: endpoint.description
+                                            .replace(/(:\n)(None)/g, '$1\n`$2`')
+                                            .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, { size: "small", label: "Stable", color: "success" })) : (_jsx(Chip, { size: "small", label: "Unstable", color: "error" })), endpoint.protected ? (_jsx(Chip, { size: "small", label: "Protected", color: "warning" })) : (_jsx(Chip, { size: "small", 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, { size: "small", 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.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const AuthDocumentation: FC;
+export default AuthDocumentation;

package/components/routes/help/AuthDocumentation.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import AUTH_EN from './markdown/en/authentication.md';
+import AUTH_FR from './markdown/fr/authentication.md';
+const AuthDocumentation = () => {
+    const { i18n } = useTranslation();
+    useScrollRestoration();
+    const md = useMemo(() => (i18n.language === 'en' ? AUTH_EN : AUTH_FR).replace(/\$CURRENT_URL/g, window.location.origin), [i18n.language]);
+    return (_jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: _jsx(Markdown, { md: md }) }));
+};
+export default AuthDocumentation;

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const BundleDocumentation: FC;
+export default BundleDocumentation;

package/components/routes/help/BundleDocumentation.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import BUNDLES_EN from './markdown/en/bundles.md';
+import BUNDLES_FR from './markdown/fr/bundles.md';
+const BundleDocumentation = () => {
+    const { i18n } = useTranslation();
+    const md = useMemo(() => (i18n.language === 'en' ? BUNDLES_EN : BUNDLES_FR), [i18n.language]);
+    return _jsx(Markdown, { md: md });
+};
+export default BundleDocumentation;

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const ClientDocumentation: FC;
+export default ClientDocumentation;

package/components/routes/help/ClientDocumentation.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
+import CLIENT_EN from './markdown/en/client.md';
+import CLIENT_FR from './markdown/fr/client.md';
+const ClientDocumentation = () => {
+    const { i18n } = useTranslation();
+    useScrollRestoration();
+    const md = useMemo(() => (i18n.language === 'en' ? CLIENT_EN : CLIENT_FR).replace(/\$CURRENT_URL/g, window.location.origin), [i18n.language]);
+    return (_jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: _jsx(Markdown, { md: md }) }));
+};
+export default ClientDocumentation;

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

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

package/components/routes/help/Help.js

@@ -0,0 +1,24 @@
+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 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';
+const HelpDashboard = () => {
+    const { t } = useTranslation(['translation', 'helpMain']);
+    const { leftnav } = useMyPreferences();
+    const pluginStore = usePluginStore();
+    useScrollRestoration();
+    const tabs = useMemo(() => ({
+        '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`))] }) }));
+};
+export default HelpDashboard;

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+declare const HitBannerDocumentation: FC;
+export default HitBannerDocumentation;