@cccsaurora/howler-ui 2.12.0-dev.30

package/dist/components/routes/help/HitLinksDocumentation.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Markdown from 'components/elements/display/Markdown';
+import { useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ApiConfigContext } from '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/dist/components/routes/help/HitSchemaDocumentation.d.ts

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

package/dist/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 '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 'utils/Throttler';
+import { ApiConfigContext } from '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/dist/components/routes/help/NotebookDocumentation.d.ts

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

package/dist/components/routes/help/NotebookDocumentation.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PageCenter from 'commons/components/pages/PageCenter';
+import Markdown from 'components/elements/display/Markdown';
+import { useScrollRestoration } from '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/dist/components/routes/help/OverviewDocumentation.d.ts

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

package/dist/components/routes/help/OverviewDocumentation.js

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

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

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

package/dist/components/routes/help/RetentionDocumentation.js

@@ -0,0 +1,35 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import PageCenter from 'commons/components/pages/PageCenter';
+import Markdown from 'components/elements/display/Markdown';
+import { useScrollRestoration } from 'components/hooks/useScrollRestoration';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Skeleton } from '@mui/material';
+import api from 'api';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import HitCard from 'components/elements/hit/HitCard';
+import { HitLayout } from '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/dist/components/routes/help/SearchDocumentation.d.ts

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

package/dist/components/routes/help/SearchDocumentation.js

@@ -0,0 +1,113 @@
+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 'commons/components/app/hooks';
+import PageCenter from 'commons/components/pages/PageCenter';
+import { ApiConfigContext } from 'components/app/providers/ApiConfigProvider';
+import { useScrollRestoration } from '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: '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: "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/dist/components/routes/help/TemplateDocumentation.d.ts

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

package/dist/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 'commons/components/pages/PageCenter';
+import Markdown from 'components/elements/display/Markdown';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import DefaultOutline from 'components/elements/hit/outlines/DefaultOutline';
+import { useScrollRestoration } from 'components/hooks/useScrollRestoration';
+import moment from 'moment';
+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: moment().subtract(4, 'hour').toString(),
+            end: moment().subtract(3, 'hour').toString(),
+            kind: 'Loud meow',
+            outcome: 'Food provided'
+        }
+    },
+    {
+        howler: { id: 'hit2', analytic: 'Cat Checker', detection: 'Looking for paw prints' },
+        event: {
+            start: moment().subtract(6, 'hour').toString(),
+            end: moment().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/dist/components/routes/help/ViewDocumentation.d.ts

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

package/dist/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 'commons/components/pages/PageCenter';
+import Markdown from 'components/elements/display/Markdown';
+import { useScrollRestoration } from '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/dist/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/dist/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/dist/components/routes/hits/search/BundleParentMenu.d.ts

@@ -0,0 +1,6 @@
+import type { Hit } from 'models/entities/generated/Hit';
+import type { FC } from 'react';
+declare const BundleParentMenu: FC<{
+    bundle: Hit;
+}>;
+export default BundleParentMenu;

package/dist/components/routes/hits/search/BundleParentMenu.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { AccountTree } from '@mui/icons-material';
+import { IconButton, Paper, Popover, Skeleton, Stack, Tooltip } from '@mui/material';
+import api from 'api';
+import HowlerCard from 'components/elements/display/HowlerCard';
+import HitBanner from 'components/elements/hit/HitBanner';
+import { HitLayout } from 'components/elements/hit/HitLayout';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+const BundleParentMenu = ({ bundle }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [parentAnchor, setParentAnchor] = useState(null);
+    const [parentHits, setParentHits] = useState([]);
+    const onSelect = useCallback((bundleId) => {
+        navigate(`/bundles/${bundleId}?span=date.range.all&query=howler.id%3A*`);
+        setParentAnchor(null);
+    }, [navigate]);
+    useEffect(() => {
+        if (!parentAnchor) {
+            return;
+        }
+        api.search.hit
+            .post({ query: `howler.id:(${bundle.howler.bundles.join(' OR ')})` })
+            .then(response => setParentHits(response.items));
+    }, [bundle.howler.bundles, parentAnchor]);
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: t('hit.bundle.parents.show'), children: _jsx(IconButton, { size: "small", onClick: event => setParentAnchor(event.currentTarget), children: _jsx(AccountTree, { fontSize: "small" }) }) }), _jsx(Popover, { open: !!parentAnchor, anchorEl: parentAnchor, anchorOrigin: { vertical: 'top', horizontal: 'left' }, transformOrigin: { horizontal: 'right', vertical: 'top' }, onClose: () => setParentAnchor(null), children: _jsx(Paper, { sx: { p: 1, minWidth: '750px' }, children: _jsx(Stack, { spacing: 1, children: parentHits.length < 1
+                            ? bundle.howler.bundles.map(id => _jsx(Skeleton, { variant: "rounded", height: "100px" }, id))
+                            : parentHits.map(parent => (_jsx(HowlerCard, { sx: { p: 1, cursor: 'pointer' }, onClick: () => onSelect(parent.howler.id), children: _jsx(HitBanner, { hit: parent, layout: HitLayout.DENSE }) }, parent.howler.id))) }) }) })] }));
+};
+export default BundleParentMenu;

package/dist/components/routes/hits/search/BundleScroller.d.ts

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const BundleScroller: FC<PropsWithChildren>;

package/dist/components/routes/hits/search/BundleScroller.js

@@ -0,0 +1,6 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useScrollRestoration } from 'components/hooks/useScrollRestoration';
+export const BundleScroller = ({ children }) => {
+    useScrollRestoration('hitscrollbar');
+    return _jsx(_Fragment, { children: children });
+};

package/dist/components/routes/hits/search/CustomSort.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("react").NamedExoticComponent<{}>;
+export default _default;

package/dist/components/routes/hits/search/CustomSort.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDownward, ArrowUpward, Cancel } from '@mui/icons-material';
+import { Autocomplete, Chip, Grid, MenuItem, Select, Stack, TextField } from '@mui/material';
+import { FieldContext } from 'components/app/providers/FieldProvider';
+import { ParameterContext } from 'components/app/providers/ParameterProvider';
+import { uniqBy } from 'lodash-es';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useContextSelector } from 'use-context-selector';
+const CustomSort = () => {
+    const { t } = useTranslation();
+    const [field, setField] = useState('');
+    const [sort, setSort] = useState('');
+    const { hitFields, getHitFields } = useContext(FieldContext);
+    const sortEntries = useContextSelector(ParameterContext, ctx => ctx.sort?.split(','));
+    const setSavedSort = useContextSelector(ParameterContext, ctx => ctx.setSort);
+    const sortFields = useMemo(() => sortEntries.map(entry => entry.split(' ').slice(0, 2)), [sortEntries]);
+    useEffect(() => {
+        getHitFields();
+    }, [getHitFields]);
+    useEffect(() => {
+        if (!sort) {
+            setSort('desc');
+        }
+    }, [sort]);
+    useEffect(() => {
+        if (!field) {
+            return;
+        }
+        setSavedSort(uniqBy([...sortEntries, `${field} ${sort}`], entry => entry.replace(/ .+/, '')).join(','));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [field]);
+    return (_jsxs(Stack, { spacing: 1, maxWidth: "450px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '225px' }, size: "small", value: field, options: hitFields.map(_field => _field.key), getOptionDisabled: option => sortEntries.map(entry => entry.replace(/ .+/, '')).includes(option), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.sort.fields') }), onChange: (_, value) => setField(value), disableClearable: true }), _jsxs(Select, { size: "small", sx: { minWidth: '150px' }, value: sort, onChange: e => setSort(e.target.value), children: [_jsx(MenuItem, { value: "asc", children: t('asc') }), _jsx(MenuItem, { value: "desc", children: t('desc') })] })] }), _jsx(Grid, { container: true, spacing: 1, sx: theme => ({ marginLeft: `${theme.spacing(-1)} !important` }), children: sortFields.map(([key, direction]) => (_jsx(Grid, { item: true, children: _jsx(Chip, { variant: "outlined", label: key, icon: direction === 'asc' ? _jsx(ArrowUpward, {}) : _jsx(ArrowDownward, {}), deleteIcon: _jsx(Cancel, {}), onClick: () => setSavedSort(sortEntries
+                            .map(entry => entry?.replace(`${key} ${direction}`, `${key} ${direction === 'asc' ? 'desc' : 'asc'}`))
+                            .join(',')), onDelete: () => setSavedSort(sortEntries.filter(entry => entry && entry.split(' ')[0] != key).join(',')) }) }, key))) })] }));
+};
+export default memo(CustomSort);

package/dist/components/routes/hits/search/HitBrowser.d.ts

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