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

package/components/routes/help/HitBannerDocumentation.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardContent, Divider, Typography } from '@mui/material';
+import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
+import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
+import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+const HitBannerDocumentation = () => {
+    const { t } = useTranslation();
+    const dummyHit = useMemo(() => ({
+        timestamp: '2023-02-11T15:10:31.585826Z',
+        howler: {
+            id: 'howler.id',
+            analytic: 'howler.analytic',
+            detection: 'howler.detection',
+            assignment: 'howler.assignment',
+            hash: 'howler.hash',
+            outline: {
+                threat: 'howler.outline.threat',
+                target: 'howler.outline.target',
+                indicators: ['howler.outline.indicators'],
+                summary: 'howler.outline.summary'
+            },
+            escalation: 'howler.escalation',
+            status: 'howler.status'
+        },
+        event: {
+            created: '2023-02-11T15:10:31.585826Z',
+            provider: 'event.provider'
+        },
+        organization: {
+            id: 'organization.id',
+            name: 'organization.name'
+        },
+        threat: {
+            tactic: {
+                id: 'threat.tactic.id',
+                name: 'threat.tactic.name'
+            },
+            technique: {
+                id: 'threat.technique.id',
+                name: 'threat.technique.name'
+            }
+        }
+    }), []);
+    return (_jsxs(_Fragment, { children: [_jsx("h1", { children: t('help.hit.banner.title') }), _jsx(Typography, { variant: "body1", children: t('help.hit.banner.description') }), _jsx(Divider, { orientation: "horizontal", sx: { my: 2 } }), _jsx(HowlerCard, { sx: { mb: 2 }, children: _jsx(CardContent, { children: _jsx(HitBanner, { hit: dummyHit, layout: HitLayout.COMFY }) }) }), _jsx(Typography, { variant: "body1", children: t('help.hit.banner.json') }), _jsx(Divider, { orientation: "horizontal", sx: { my: 2 } }), _jsx(JSONViewer, { data: dummyHit })] }));
+};
+export default HitBannerDocumentation;

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

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

package/components/routes/help/HitDocumentation.js

@@ -0,0 +1,34 @@
+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 { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import BundleDocumentation from './BundleDocumentation';
+import HelpTabs from './components/HelpTabs';
+import HitBannerDocumentation from './HitBannerDocumentation';
+import HitLabelsDocumentation from './HitLabelsDocumentation';
+import HitLinksDocumentation from './HitLinksDocumentation';
+import HitSchemaDocumentation from './HitSchemaDocumentation';
+const HitDocumentation = () => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const useHorizontal = useMediaQuery(theme.breakpoints.down(1700));
+    useScrollRestoration();
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [tab, setTab] = useState(searchParams.get('tab') ?? 'schema');
+    const onChange = useCallback((_tab) => {
+        setTab(_tab);
+        searchParams.set('tab', _tab);
+        setSearchParams(new URLSearchParams(searchParams));
+    }, [searchParams, setSearchParams]);
+    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.hit.schema.title') }), value: "schema", onClick: () => onChange('schema') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.banner.title') }), value: "header", onClick: () => onChange('header') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.bundle.title') }), value: "bundle", onClick: () => onChange('bundle') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.links.title') }), value: "links", onClick: () => onChange('links') }), _jsx(Tab, { label: _jsx(Typography, { variant: "caption", children: t('help.hit.labels.title') }), value: "labels", onClick: () => onChange('labels') })] }), _jsx(Box, { children: {
+                        bundle: () => _jsx(BundleDocumentation, {}),
+                        header: () => _jsx(HitBannerDocumentation, {}),
+                        links: () => _jsx(HitLinksDocumentation, {}),
+                        labels: () => _jsx(HitLabelsDocumentation, {}),
+                        schema: () => _jsx(HitSchemaDocumentation, {})
+                    }[tab]() })] }) }));
+};
+export default HitDocumentation;

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

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

package/components/routes/help/HitLabelsDocumentation.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Chip, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
+import { capitalize } from 'lodash-es';
+import { LABEL_TYPES } from '@cccsaurora/howler-ui/utils/constants';
+const HitLabelsDocumentation = () => {
+    const { t } = useTranslation();
+    return (_jsxs(Stack, { children: [_jsx("h1", { children: t('help.hit.labels.title') }), _jsx(TableContainer, { component: Paper, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('page.documentation.labels.name') }), _jsx(TableCell, { children: t('page.documentation.labels.description') }), _jsx(TableCell, { children: t('page.documentation.labels.example') })] }) }), _jsx(TableBody, { children: Object.entries(LABEL_TYPES).map(([label, details]) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: capitalize(label) }), _jsx(TableCell, { children: t(`hit.label.category.${label}`).replace(/.+ - /, '') }), _jsx(TableCell, { children: _jsx(Chip, { icon: details?.icon ?? undefined, variant: "filled", size: "small", label: label, sx: [
+                                                {
+                                                    mr: 1,
+                                                    mb: 1
+                                                },
+                                                details?.color && {
+                                                    '&, & svg': {
+                                                        color: theme => theme.palette.getContrastText(details.color) + ' !important'
+                                                    },
+                                                    backgroundColor: details.color
+                                                }
+                                            ] }) })] }, label))) })] }) })] }));
+};
+export default HitLabelsDocumentation;

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

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

package/components/routes/help/HitLinksDocumentation.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import LINKS_EN from './markdown/en/links.md';
+import LINKS_FR from './markdown/fr/links.md';
+const HitLinksDocumentation = () => {
+    const { i18n } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const md = useMemo(() => {
+        const appList = config.configuration.ui.apps.map(a => `- \`${a.name.toLowerCase()}\``).join('\n');
+        return (i18n.language === 'en' ? LINKS_EN : LINKS_FR).replace('$APP_LIST', appList);
+    }, [config.configuration.ui.apps, i18n.language]);
+    return _jsx(Markdown, { md: md });
+};
+export default HitLinksDocumentation;

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

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

package/components/routes/help/HitSchemaDocumentation.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Clear } from '@mui/icons-material';
+import { Alert, AlertTitle, Box, Chip, IconButton, InputAdornment, Stack, Table, TableBody, TableCell, TableHead, TableRow, TextField, Typography, useTheme } from '@mui/material';
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import { memo, useCallback, useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import SCHEMA_EN from './markdown/en/schema.md';
+import SCHEMA_FR from './markdown/fr/schema.md';
+const THROTTLER = new Throttler(300);
+const TableHeader = () => {
+    const { t } = useTranslation();
+    return (_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { width: "100", children: t('help.hit.schema.table.name') }), _jsx(TableCell, { children: t('help.hit.schema.table.type') }), _jsx(TableCell, { children: t('help.hit.schema.table.description') })] }) }));
+};
+const RowEntry = memo(({ field }) => {
+    const { t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const theme = useTheme();
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { width: "350", style: { wordBreak: 'break-word' }, children: _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Typography, { children: field }), config.indexes.hit[field].list && _jsx(Chip, { color: "warning", size: "small", label: t('list') }), config.indexes.hit[field].deprecated && _jsx(Chip, { color: "error", size: "small", label: t('deprecated') })] }) }), _jsx(TableCell, { width: "75", children: _jsx(Typography, { children: config.indexes.hit[`${field}.key_a`] ? 'dict' : config.indexes.hit[field].type }) }), _jsxs(TableCell, { sx: { maxWidth: '500px' }, children: [_jsx(Markdown, { md: config.indexes.hit[field].description ?? t('help.hit.schema.description.missing') }), config.indexes.hit[field].regex && (_jsx("a", { href: `https://regexr.com/?expression=${encodeURIComponent(config.indexes.hit[field].regex)}`, children: _jsx(Typography, { children: t('help.hit.schema.regex') }) })), config.indexes.hit[field].values?.length > 0 && (_jsxs(Stack, { spacing: 1, children: [_jsxs(Typography, { children: [t('help.hit.schema.values'), ":"] }), _jsx(Stack, { direction: "row", spacing: 0.5, flexWrap: "wrap", children: config.indexes.hit[field].values.map(val => (_jsx("code", { style: {
+                                        padding: theme.spacing(0.5),
+                                        border: 'thin solid',
+                                        borderColor: theme.palette.divider,
+                                        borderRadius: theme.shape.borderRadius
+                                    }, children: val }, val))) })] })), config.indexes.hit[field].deprecated_description && (_jsxs(Alert, { variant: "outlined", color: "error", children: [_jsx(AlertTitle, { children: t('deprecation.instructions') }), _jsx(Markdown, { md: config.indexes.hit[field].deprecated_description })] }))] })] }));
+});
+const HitSchemaDocumentation = () => {
+    const { i18n, t } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [phrase, setPhrase] = useState(searchParams.get('phrase') || '');
+    const md = useMemo(() => {
+        return i18n.language === 'en' ? SCHEMA_EN : SCHEMA_FR;
+    }, [i18n.language]);
+    const onSearchChange = useCallback(e => {
+        setPhrase(e.target.value);
+        THROTTLER.debounce(() => {
+            if (e.target.value) {
+                searchParams.set('phrase', e.target.value);
+            }
+            else {
+                searchParams.delete('phrase');
+            }
+            setSearchParams(searchParams);
+        });
+    }, [searchParams, setSearchParams]);
+    const onClear = useCallback(() => {
+        setPhrase('');
+        searchParams.delete('phrase');
+        setSearchParams(searchParams);
+    }, [searchParams, setSearchParams]);
+    const filterSearch = useCallback((field) => {
+        if (!phrase) {
+            return true;
+        }
+        const _phrase = phrase.toLowerCase();
+        if (field.includes(_phrase)) {
+            return true;
+        }
+        const indexData = config.indexes.hit[field];
+        if (indexData.type.includes(_phrase) || indexData.description?.toLowerCase().includes(_phrase)) {
+            return true;
+        }
+        return false;
+    }, [config.indexes.hit, phrase]);
+    const howlerFields = useMemo(() => Object.keys(config.indexes.hit)
+        .filter(field => field.startsWith('howler') && !field.endsWith('key_a'))
+        .filter(filterSearch), [config.indexes.hit, filterSearch]);
+    const assemblylineFields = useMemo(() => Object.keys(config.indexes.hit)
+        .filter(field => field.startsWith('assemblyline') && !field.endsWith('key_a'))
+        .filter(filterSearch), [config.indexes.hit, filterSearch]);
+    const ecsFields = useMemo(() => Object.keys(config.indexes.hit)
+        .filter(field => !field.startsWith('howler') && !field.startsWith('assemblyline') && !field.endsWith('key_a'))
+        .filter(filterSearch), [config.indexes.hit, filterSearch]);
+    return (_jsxs(Stack, { spacing: 1, children: [_jsx(Markdown, { md: md }), _jsx(Box, { sx: { py: 2 } }), _jsx(TextField, { fullWidth: true, value: phrase, onChange: onSearchChange, label: t('help.hit.schema.search.prompt'), InputProps: {
+                    endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { disabled: !phrase, onClick: onClear, children: _jsx(Clear, {}) }) }))
+                } }), howlerFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", pt: 3, children: t('help.hit.schema.table.howler') }), _jsxs(Table, { size: "small", children: [_jsx(TableHeader, {}), _jsx(TableBody, { children: howlerFields.map(field => (_jsx(RowEntry, { field: field }, field))) })] })] })), assemblylineFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", pt: 3, children: t('help.hit.schema.table.assemblyline') }), _jsxs(Table, { size: "small", children: [_jsx(TableHeader, {}), _jsx(TableBody, { children: assemblylineFields.map(field => (_jsx(RowEntry, { field: field }, field))) })] })] })), ecsFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", pt: 3, children: t('help.hit.schema.table.ecs') }), _jsxs(Table, { size: "small", children: [_jsx(TableHeader, {}), _jsx(TableBody, { children: ecsFields.map(field => (_jsx(RowEntry, { field: field }, field))) })] })] }))] }));
+};
+export default HitSchemaDocumentation;

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

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

package/components/routes/help/NotebookDocumentation.js

@@ -0,0 +1,18 @@
+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 { useTranslation } from 'react-i18next';
+import NOTEBOOK_EN from './markdown/en/notebook.md';
+import NOTEBOOK_FR from './markdown/fr/notebook.md';
+const NotebookDocumentation = () => {
+    const { i18n } = useTranslation();
+    useScrollRestoration();
+    const markdown = (i18n.language === 'en' ? NOTEBOOK_EN : NOTEBOOK_FR)
+        .replaceAll('$NBGALLERY_URL', window.location.host.startsWith('localhost')
+        ? 'https://nbgallery.dev.analysis.cyber.gc.ca'
+        : window.location.origin.replace(/howler(-stg)/, 'nbgallery'))
+        .replaceAll('$CURRENT_URL', window.location.origin);
+    return (_jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: _jsx(Markdown, { md: markdown }) }));
+};
+export default NotebookDocumentation;

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

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

package/components/routes/help/OverviewDocumentation.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import HandlebarsMarkdown from '@cccsaurora/howler-ui/components/elements/display/HandlebarsMarkdown';
+import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
+import {} from 'react';
+import ErrorBoundary from '../ErrorBoundary';
+import { useStartingTemplate } from '../overviews/startingTemplate';
+const OverviewDocumentation = () => {
+    useScrollRestoration();
+    const template = useStartingTemplate();
+    return (_jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: _jsx(ErrorBoundary, { children: _jsx(HandlebarsMarkdown, { md: template }) }) }));
+};
+export default OverviewDocumentation;

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

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

package/components/routes/help/RetentionDocumentation.js

@@ -0,0 +1,35 @@
+import { jsxs as _jsxs, 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 { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Skeleton } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import HitCard from '@cccsaurora/howler-ui/components/elements/hit/HitCard';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import AUTH_EN from './markdown/en/retention.md';
+import AUTH_FR from './markdown/fr/retention.md';
+const RetentionDocumentation = () => {
+    const { i18n } = useTranslation();
+    const { config } = useContext(ApiConfigContext);
+    useScrollRestoration();
+    const [hitId, setHitId] = useState();
+    const md = useMemo(() => (i18n.language === 'en' ? AUTH_EN : AUTH_FR).replace(/\$CURRENT_URL/g, window.location.origin), [i18n.language]);
+    useEffect(() => {
+        api.search.hit
+            .post({
+            query: 'howler.id:*',
+            sort: 'event.created asc',
+            rows: 1,
+            fl: 'howler.id'
+        })
+            .then(val => setHitId(val.items[0].howler.id));
+    });
+    return (_jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: _jsx(Markdown, { md: md, components: {
+                duration: (_jsxs("span", { children: [config.configuration.system.retention.limit_amount, " ", config.configuration.system.retention.limit_unit] })),
+                alert: hitId ? _jsx(HitCard, { layout: HitLayout.DENSE, id: hitId }) : _jsx(Skeleton, { variant: "rounded", height: "250px" })
+            } }) }));
+};
+export default RetentionDocumentation;

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

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

package/components/routes/help/SearchDocumentation.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ExpandMore } from '@mui/icons-material';
+import { Accordion, AccordionDetails, AccordionSummary, Box, Card, Chip, emphasize, Stack, styled, Tab, Table, TableBody, TableCell, TableHead, TableRow, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { useAppBar, useAppLayout, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
+import { memo, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import HelpTabs from './components/HelpTabs';
+const TableRoot = styled('div')(({ theme }) => ({
+    '& .MuiTable-root': {
+        paddingRight: 8,
+        paddingLeft: 8
+    },
+    '& .MuiTableHead-root': {
+        backgroundColor: theme.palette.mode === 'dark' ? '#404040' : '#EEE',
+        whiteSpace: 'nowrap'
+    }
+}));
+const PageCenterRoot = styled(PageCenter)(({ theme }) => ({
+    '& .MuiPaper-root': {
+        backgroundColor: emphasize(theme.palette.background.default, 0.05)
+    },
+    '.multipleEx': {
+        marginBlockStart: theme.spacing(1),
+        paddingInlineStart: theme.spacing(2)
+    },
+    '.padded': {
+        paddingBottom: theme.spacing(1),
+        paddingTop: theme.spacing(1)
+    },
+    '.pre': {
+        fontFamily: 'monospace',
+        fontSize: '1rem',
+        margin: theme.spacing(0, 0, 1, 0),
+        padding: theme.spacing(1, 1.5),
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word'
+    },
+    '.paragraph': {
+        marginTop: '-96px',
+        '& .spacer': {
+            height: theme.spacing(14)
+        },
+        '& h6': {
+            fontWeight: 300
+        }
+    },
+    '.autoHide': {
+        marginTop: theme.spacing(0),
+        paddingTop: theme.spacing(4)
+    }
+}));
+const TOC_CONFIGS = [
+    { id: 'overview' },
+    { id: 'basic' },
+    {
+        id: 'fields',
+        subItems: [{ id: 'fields.legend' }, { id: 'fields.idx_hit' }, { id: 'fields.idx_user', is_admin: true }]
+    },
+    { id: 'text vs keywords' },
+    { id: 'wildcard' },
+    {
+        id: 'regex',
+        subItems: [
+            { id: 'regex.anchoring' },
+            { id: 'regex.chars' },
+            { id: 'regex.any' },
+            { id: 'regex.oneplus' },
+            { id: 'regex.zeroplus' },
+            { id: 'regex.zeroone' },
+            { id: 'regex.minmax' },
+            { id: 'regex.grouping' },
+            { id: 'regex.alternation' },
+            { id: 'regex.class' }
+        ]
+    },
+    { id: 'fuzziness' },
+    { id: 'proximity' },
+    { id: 'ranges', subItems: [{ id: 'ranges.datemath' }] },
+    { id: 'operator' },
+    { id: 'grouping' },
+    { id: 'reserved' }
+];
+const Paragraph = memo(({ id, children }) => {
+    const { autoHide: autoHideAppbar } = useAppBar();
+    const { current: currentLayout } = useAppLayout();
+    return (_jsxs("div", { id: id, className: `paragraph ${autoHideAppbar && currentLayout !== 'top' ? 'autoHide' : ''}`, children: [_jsx("div", { className: "spacer" }), children] }));
+});
+const SquareChip = styled(Chip)(({ theme }) => ({
+    borderRadius: 3,
+    height: 20,
+    margin: theme.spacing(0.1),
+    fontSize: 'smaller'
+}));
+const SearchDocumentation = () => {
+    const { t } = useTranslation(['helpSearch']);
+    const { user } = useAppUser();
+    const { config } = useContext(ApiConfigContext);
+    const location = useLocation();
+    const theme = useTheme();
+    const useHorizontal = useMediaQuery(theme.breakpoints.down(1700));
+    useScrollRestoration();
+    const indexes = useMemo(() => {
+        return config?.indexes || [];
+    }, [config]);
+    return (_jsx(PageCenterRoot, { margin: 4, width: "100%", maxWidth: "1750px", textAlign: "left", children: _jsxs(Stack, { sx: { flexDirection: useHorizontal ? 'column' : 'row', '& h1': { mt: 0 } }, children: [_jsx(HelpTabs, { value: location.hash || '#overview', children: TOC_CONFIGS.flatMap(value => [
+                        _jsx(Tab, { href: `#${value.id}`, label: _jsx(Typography, { variant: "caption", children: t(value.id) }), value: `#${value.id}` }, value.id),
+                        ...(!useHorizontal && value.subItems ? value.subItems : []).map(subItem => (!subItem.is_admin || user.is_admin) && (_jsx(Tab, { sx: { '& > span': { pl: 1 } }, href: `#${subItem.id}`, label: _jsx(Typography, { variant: "caption", children: t(subItem.id) }), value: `#${subItem.id}` }, subItem.id)))
+                    ]) }), _jsxs(Box, { children: [_jsx(Typography, { variant: "h4", children: t('title') }), _jsx(Typography, { variant: "subtitle2", children: t('subtitle') }), _jsxs(Paragraph, { id: "overview", children: [_jsx(Typography, { variant: "h5", children: t('overview') }), _jsx(_Fragment, { children: t('overview.text') })] }), _jsxs(Paragraph, { id: "basic", children: [_jsx(Typography, { variant: "h5", children: t('basic') }), _jsx(_Fragment, { children: t('basic.text') }), _jsx(Typography, { variant: "subtitle2", className: "padded", children: t('exemples') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('basic.ex1') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('basic.ex2') })] }), _jsxs(Paragraph, { id: "fields", children: [_jsx(Typography, { variant: "h5", children: t('fields') }), _jsx(_Fragment, { children: t('fields.text') }), _jsx(Typography, { variant: "subtitle2", className: "padded", children: t('exemples') }), _jsxs("ul", { className: "multipleEx", children: [_jsxs("li", { children: [t('fields.ex1.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('fields.ex1') })] }), _jsxs("li", { children: [t('fields.ex2.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('fields.ex2') })] }), _jsxs("li", { children: [t('fields.ex3.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('fields.ex3') })] }), _jsxs("li", { children: [t('fields.ex4.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('fields.ex4') })] }), _jsxs("li", { children: [t('fields.ex5.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('fields.ex5') })] })] }), _jsx("div", { className: "padded", children: t('fields.text2') }), _jsxs("div", { children: [_jsx("b", { children: _jsx("i", { children: `${t('fields.important')}:` }) }), ` ${t('fields.important.text')}`] })] }), _jsxs(Paragraph, { id: "text vs keywords", children: [_jsx(Typography, { variant: "h5", children: t('fields.textvskeywords') }), _jsx(_Fragment, { children: t('fields.textvskeywords.description') }), _jsx(Typography, { variant: "subtitle2", className: "padded", children: t('fields.textvskeywords.keywordfamily') }), _jsxs("ul", { className: "multipleEx", children: [_jsxs("li", { children: [_jsx(Card, { variant: "outlined", className: "pre", children: t('fields.textvskeywords.wildcard') }), t('fields.textvskeywords.wildcard.description')] }), _jsxs("li", { children: [_jsx(Card, { variant: "outlined", className: "pre", children: t('fields.textvskeywords.keyword') }), t('fields.textvskeywords.keyword.description')] }), _jsxs("li", { children: [_jsx(Card, { variant: "outlined", className: "pre", children: t('fields.textvskeywords.constantkeyword') }), t('fields.textvskeywords.constantkeyword.description')] })] }), _jsxs(Typography, { variant: "subtitle2", className: "padded", children: [t('fields.textvskeywords.keyword.more.info'), ' ', _jsx("a", { href: "https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/keyword", style: { color: 'info', textDecoration: 'underline' }, children: "https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/keyword" })] }), _jsx(Typography, { variant: "subtitle2", className: "padded", children: t('fields.textvskeywords.textfamily') }), _jsxs("ul", { className: "multipleEx", children: [_jsxs("li", { children: [_jsx(Card, { variant: "outlined", className: "pre", children: t('fields.textvskeywords.text') }), t('fields.textvskeywords.text.description')] }), _jsxs("li", { children: [_jsx(Card, { variant: "outlined", className: "pre", children: t('fields.textvskeywords.matchonlytext') }), t('fields.textvskeywords.matchonlytext.description')] })] }), _jsxs(Typography, { variant: "subtitle2", className: "padded", children: [t('fields.textvskeywords.text.more.info'), ' ', _jsx("a", { href: "https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/text", style: { color: 'info', textDecoration: 'underline' }, children: "https://www.elastic.co/docs/reference/elasticsearch/mapping-reference/text" })] }), _jsxs(Typography, { variant: "subtitle2", className: "padded", children: [t('fields.textvskeywords.text.keyword.compare'), ' ', _jsx("a", { href: "https://www.elastic.co/blog/strings-are-dead-long-live-strings", style: { color: 'info', textDecoration: 'underline' }, children: "https://www.elastic.co/blog/strings-are-dead-long-live-strings" })] }), _jsx("div", {})] }), _jsxs(Paragraph, { id: "fields.legend", children: [_jsx(Typography, { variant: "h6", children: t('fields.legend') }), _jsx(_Fragment, { children: t('fields.legend.text') }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("b", { children: 'text' }), `: ${t('fields.legend.text_field')}`] }), _jsxs("li", { children: [_jsx("b", { children: 'ip' }), `: ${t('fields.legend.ip_field')}`] }), _jsxs("li", { children: [_jsx(SquareChip, { color: "primary", size: "small", label: t('fields.att.default') }), ":", ' ', t('fields.legend.default')] }), _jsxs("li", { children: [_jsx(SquareChip, { color: "warning", size: "small", label: t('fields.att.list') }), ": ", t('fields.legend.list')] }), _jsxs("li", { children: [_jsx(SquareChip, { color: "info", size: "small", label: t('fields.att.stored') }), ": ", t('fields.legend.stored')] })] })] }), Object.keys(indexes).map(idx => (_jsxs(Accordion, { sx: { mb: 2, backgroundColor: 'background.paper' }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), children: _jsx(Typography, { variant: "h6", children: t(`fields.idx_${idx}`) }) }), _jsx(AccordionDetails, { sx: { px: '0 !important', mt: -6 }, children: _jsx(Paragraph, { id: `fields.idx_${idx}`, children: _jsx(TableRoot, { children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: t('fields.table.name') }), _jsx(TableCell, { children: t('fields.table.type') }), _jsx(TableCell, { children: t('fields.table.attrib') })] }) }), _jsx(TableBody, { children: Object.keys(indexes[idx]).map(field => indexes[idx][field].indexed && (_jsxs(TableRow, { hover: true, children: [_jsx(TableCell, { width: "50%", style: { wordBreak: 'break-word' }, children: field }), _jsx(TableCell, { children: indexes[idx][field].type }), _jsxs(TableCell, { children: [indexes[idx][field].stored && (_jsx(SquareChip, { color: "info", size: "small", label: t('fields.att.stored') })), indexes[idx][field].list && (_jsx(SquareChip, { color: "warning", size: "small", label: t('fields.att.list') })), indexes[idx][field].default && (_jsx(SquareChip, { color: "primary", size: "small", label: t('fields.att.default') }))] })] }, field))) })] }) }) }) })] }, idx))), _jsxs(Paragraph, { id: "wildcard", children: [_jsx(Typography, { variant: "h5", children: t('wildcard') }), _jsx("div", { className: "padded", children: t('wildcard.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('wildcard.ex') }), _jsx("div", { className: "padded", children: t('wildcard.text2') }), _jsxs("div", { children: [_jsx("b", { children: _jsx("i", { children: `${t('wildcard.note')}:` }) }), ` ${t('wildcard.note.text')}`] })] }), _jsxs(Paragraph, { id: "regex", children: [_jsx(Typography, { variant: "h5", children: t('regex') }), _jsx("div", { className: "padded", children: t('regex.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.ex') }), _jsx("div", { children: _jsx("b", { children: _jsx("i", { children: t('regex.warning') }) }) }), _jsx("div", { className: "padded", children: t('regex.warning.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.warning.ex') }), _jsx("div", { className: "padded", children: t('regex.warning.follow') })] }), _jsxs(Paragraph, { id: "regex.anchoring", children: [_jsx(Typography, { variant: "h6", children: t('regex.anchoring') }), _jsx("div", { className: "padded", children: t('regex.anchoring.text') }), _jsx("div", { className: "padded", children: t('regex.anchoring.text2') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.anchoring.ex') })] }), _jsxs(Paragraph, { id: "regex.chars", children: [_jsx(Typography, { variant: "h6", children: t('regex.chars') }), _jsx("div", { className: "padded", children: t('regex.chars.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.chars.ex') }), _jsx("div", { className: "padded", children: t('regex.chars.text2') }), _jsx("div", { className: "padded", children: t('regex.chars.text3') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.chars.ex2') })] }), _jsxs(Paragraph, { id: "regex.any", children: [_jsx(Typography, { variant: "h6", children: t('regex.any') }), _jsx("div", { className: "padded", children: t('regex.any.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.any.ex') })] }), _jsxs(Paragraph, { id: "regex.oneplus", children: [_jsx(Typography, { variant: "h6", children: t('regex.oneplus') }), _jsx("div", { className: "padded", children: t('regex.oneplus.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.oneplus.ex') })] }), _jsxs(Paragraph, { id: "regex.zeroplus", children: [_jsx(Typography, { variant: "h6", children: t('regex.zeroplus') }), _jsx("div", { className: "padded", children: t('regex.zeroplus.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.zeroplus.ex') })] }), _jsxs(Paragraph, { id: "regex.zeroone", children: [_jsx(Typography, { variant: "h6", children: t('regex.zeroone') }), _jsx("div", { className: "padded", children: t('regex.zeroone.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.zeroone.ex') })] }), _jsxs(Paragraph, { id: "regex.minmax", children: [_jsx(Typography, { variant: "h6", children: t('regex.minmax') }), _jsx("div", { className: "padded", children: t('regex.minmax.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.minmax.ex') }), _jsx("div", { className: "padded", children: t('regex.minmax.text2') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.minmax.ex2') })] }), _jsxs(Paragraph, { id: "regex.grouping", children: [_jsx(Typography, { variant: "h6", children: t('regex.grouping') }), _jsx("div", { className: "padded", children: t('regex.grouping.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.grouping.ex') })] }), _jsxs(Paragraph, { id: "regex.alternation", children: [_jsx(Typography, { variant: "h6", children: t('regex.alternation') }), _jsx("div", { className: "padded", children: t('regex.alternation.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.alternation.ex') })] }), _jsxs(Paragraph, { id: "regex.class", children: [_jsx(Typography, { variant: "h6", children: t('regex.class') }), _jsx("div", { className: "padded", children: t('regex.class.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.class.ex') }), _jsx("div", { className: "padded", children: t('regex.class.text2') }), _jsx("div", { className: "padded", children: t('regex.class.text3') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('regex.class.ex2') })] }), _jsxs(Paragraph, { id: "fuzziness", children: [_jsx(Typography, { variant: "h5", children: t('fuzziness') }), _jsx("div", { className: "padded", children: t('fuzziness.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('fuzziness.ex') }), _jsx("div", { className: "padded", children: t('fuzziness.text2') }), _jsx("div", { className: "padded", children: t('fuzziness.text3') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('fuzziness.ex2') })] }), _jsxs(Paragraph, { id: "proximity", children: [_jsx(Typography, { variant: "h5", children: t('proximity') }), _jsx("div", { className: "padded", children: t('proximity.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('proximity.ex') }), _jsx("div", { className: "padded", children: t('proximity.text2') })] }), _jsxs(Paragraph, { id: "ranges", children: [_jsx(Typography, { variant: "h5", children: t('ranges') }), _jsx(_Fragment, { children: t('ranges.text') }), _jsx(Typography, { variant: "subtitle2", className: "padded", children: t('exemples') }), _jsxs("ul", { className: "multipleEx", children: [_jsxs("li", { children: [t('ranges.ex1.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.ex1') })] }), _jsxs("li", { children: [t('ranges.ex2.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.ex2') })] }), _jsxs("li", { children: [t('ranges.ex3.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.ex3') })] }), _jsxs("li", { children: [t('ranges.ex4.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.ex4') })] }), _jsxs("li", { children: [t('ranges.ex5.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.ex5') })] }), _jsxs("li", { children: [t('ranges.ex6.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.ex6') })] }), _jsxs("li", { children: [t('ranges.ex7.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.ex7') })] })] }), _jsx("div", { className: "padded", children: t('ranges.text2') }), _jsx("ul", { className: "multipleEx", children: _jsxs("li", { children: [t('ranges.ex8.title'), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.ex8') })] }) }), _jsx("div", { className: "padded", children: t('ranges.text3') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.ex9') }), _jsx("div", { className: "padded", children: t('ranges.text4') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.ex10') })] }), _jsxs(Paragraph, { id: "ranges.datemath", children: [_jsx(Typography, { variant: "h6", children: t('ranges.datemath') }), _jsx("div", { className: "padded", children: t('ranges.datemath.text') }), _jsxs("ul", { children: [_jsx("li", { children: t('ranges.datemath.list1') }), _jsx("li", { children: t('ranges.datemath.list2') }), _jsx("li", { children: t('ranges.datemath.list3') })] }), _jsx("div", { className: "padded", children: t('ranges.datemath.text2') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.datemath.ex1') }), _jsx("div", { className: "padded", children: t('ranges.datemath.text3') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('ranges.datemath.ex2') })] }), _jsxs(Paragraph, { id: "operator", children: [_jsx(Typography, { variant: "h5", children: t('operator') }), _jsx("div", { className: "padded", children: t('operator.text') }), _jsx("div", { className: "padded", children: t('operator.text2') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('operator.ex1') }), _jsx("div", { className: "padded", children: t('operator.text3') }), _jsxs("ul", { children: [_jsx("li", { children: t('operator.list1') }), _jsx("li", { children: t('operator.list2') }), _jsx("li", { children: t('operator.list3') })] }), _jsx("div", { className: "padded", children: t('operator.text4') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('operator.ex2') }), _jsx("div", { className: "padded", children: t('operator.text5') })] }), _jsxs(Paragraph, { id: "grouping", children: [_jsx(Typography, { variant: "h5", children: t('grouping') }), _jsx("div", { className: "padded", children: t('grouping.text') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('grouping.ex') }), _jsx("div", { className: "padded", children: t('grouping.text2') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('grouping.ex2') })] }), _jsxs(Paragraph, { id: "reserved", children: [_jsx(Typography, { variant: "h5", children: t('reserved') }), _jsx("div", { className: "padded", children: t('reserved.text') }), _jsx("div", { className: "padded", children: t('reserved.text2') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('reserved.ex') }), _jsx("div", { className: "padded", children: t('reserved.text3') }), _jsx(Card, { variant: "outlined", className: "pre", children: t('reserved.ex2') }), _jsx("div", { className: "padded", children: t('reserved.text4') }), _jsxs("div", { className: "padded", children: [_jsx("b", { children: _jsx("i", { children: t('reserved.note') }) }), `: ${t('reserved.text5')}`] })] })] })] }) }));
+};
+export default SearchDocumentation;

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

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

package/components/routes/help/TemplateDocumentation.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, Stack } from '@mui/material';
+import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import Markdown from '@cccsaurora/howler-ui/components/elements/display/Markdown';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import DefaultOutline from '@cccsaurora/howler-ui/components/elements/hit/outlines/DefaultOutline';
+import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/useScrollRestoration';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import TEMPLATES_EN from './markdown/en/templates.md';
+import TEMPLATES_FR from './markdown/fr/templates.md';
+const ALERTS = [
+    {
+        howler: { id: 'hit1', analytic: 'Cat Checker', detection: 'Listening for Meows' },
+        event: {
+            start: dayjs().subtract(4, 'hour').toString(),
+            end: dayjs().subtract(3, 'hour').toString(),
+            kind: 'Loud meow',
+            outcome: 'Food provided'
+        }
+    },
+    {
+        howler: { id: 'hit2', analytic: 'Cat Checker', detection: 'Looking for paw prints' },
+        event: {
+            start: dayjs().subtract(6, 'hour').toString(),
+            end: dayjs().subtract(5, 'hour').toString(),
+            provider: "The neighbour's cat (probably)",
+            reason: 'There was some fish we forgot to put away in the kitchen'
+        }
+    }
+];
+const TemplateDocumentation = () => {
+    const { i18n } = useTranslation();
+    useScrollRestoration();
+    const [md1, md2] = useMemo(() => {
+        let markdown = i18n.language === 'en' ? TEMPLATES_EN : TEMPLATES_FR;
+        markdown = markdown.replace(/\$CURRENT_URL/g, window.location.origin);
+        ALERTS.forEach((alert, index) => {
+            markdown = markdown.replace(`$ALERT_${index + 1}`, JSON.stringify(alert, null, 2));
+        });
+        return markdown.split('\n===SPLIT===\n');
+    }, [i18n.language]);
+    return (_jsxs(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: [_jsx(Markdown, { md: md1 }), _jsx(Stack, { spacing: 1, children: ALERTS.map(alert => (_jsx(Card, { variant: "outlined", children: _jsx(CardContent, { children: _jsx(DefaultOutline, { hit: alert, fields: Object.keys(alert).flatMap(key => Object.keys(alert[key]).map(key2 => [key, key2].join('.'))), layout: HitLayout.NORMAL, readonly: true }) }) }, alert.howler.id))) }), _jsx(Markdown, { md: md2 })] }));
+};
+export default TemplateDocumentation;

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

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

package/components/routes/help/ViewDocumentation.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Search } from '@mui/icons-material';
+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 VIEWS_EN from './markdown/en/views.md';
+import VIEWS_FR from './markdown/fr/views.md';
+const ViewDocumentation = () => {
+    const { i18n } = useTranslation();
+    useScrollRestoration();
+    const md = useMemo(() => (i18n.language === 'en' ? VIEWS_EN : VIEWS_FR).replace(/\$CURRENT_URL/g, window.location.origin), [i18n.language]);
+    return (_jsx(PageCenter, { margin: 4, width: "100%", textAlign: "left", children: _jsx(Markdown, { md: md, components: {
+                search: _jsx(Search, { fontSize: "inherit" })
+            } }) }));
+};
+export default ViewDocumentation;

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

@@ -0,0 +1,6 @@
+import type { FC, PropsWithChildren } from 'react';
+interface TabProps {
+    value: string;
+}
+declare const HelpTabs: FC<PropsWithChildren<TabProps>>;
+export default HelpTabs;

package/components/routes/help/components/HelpTabs.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs, useMediaQuery, useTheme } from '@mui/material';
+const HelpTabs = ({ children, value }) => {
+    const theme = useTheme();
+    const useHorizontal = useMediaQuery(theme.breakpoints.down(1700));
+    return (_jsx(Tabs, { value: value, orientation: useHorizontal ? 'horizontal' : 'vertical', variant: "scrollable", scrollButtons: "auto", sx: [
+            {
+                position: 'sticky',
+                top: theme.spacing(8),
+                flexShrink: 0,
+                alignSelf: 'stretch',
+                backgroundColor: 'background.paper',
+                zIndex: 100,
+                '& a': { p: 1, minHeight: 'initial' }
+            },
+            useHorizontal
+                ? {
+                    marginLeft: '-40px',
+                    marginRight: '-40px'
+                }
+                : {
+                    mr: 3,
+                    minWidth: '225px',
+                    '& a': {
+                        alignItems: 'start'
+                    }
+                }
+        ], children: children }));
+};
+export default HelpTabs;

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

@@ -0,0 +1 @@
+export default "# Using Actions in Howler\n\nActions are a feature in Howler that allow users to perform particular tasks on a large number of hits, through automating the execution of a task on each hit. There are currently `action_count` operations supported in howler:\n\n`action_list`\n\nAll of these operations can be combined together into unique actions - that is, operations are essentially the building blocks of actions in Howler. Each operation can only appear once per action, and all operations are configured through one unified UI. In this document, we will walk through the steps necessary to run and save an action.\n\n## Configuring an Action\n\nIn order to begin configuring your action, decide if this will be a one-off action or a saved action you want to run several times. If you want to run it once, use the `t(route.actions.change)` entry in the sidebar, while a saved action is best configured under the `t(route.actions.manager)` by pressing \"`t(route.actions.create)`\".\n\nThe first step of any action will be to design a query on which you want this action to run. The search box at the top of the accepts any lucene query - the same format as searching for hits.\n\n`tui_phrase`\n\nOnce you are satisfied with the hits that will be included in this query, you can begin adding operations. You can do so by selecting the operation you want to add from the dropdown:\n\n`operation_select`\n\nOnce you've selected the operation you want to add, it will prompt you for a list of parameters you will need to fill out. Below is an example for adding a label.\n\n`operation_configuration`\n\nOnce the operation validates successfully, you can repeat this process with the next operation. Once you've added all the operations you're interested in, you can execute or save the action using the button below the search bar. This will generate a report of the steps taken.\n\n`report`\n\nOccaisionally, actions will result in an error, either on validation or on execution. In these cases, an error alert will be shown, helping you solve the issue.\n\n## Automating an Action\n\nIn order to automate an action, open any saved action. The options available to you for automation (`automation_options`) will show up as checkboxes. Checking the box will ensure this action will run then - no further work required.\n"