@cccsaurora/howler-ui 2.18.0-dev.704 → 2.18.0-dev.710

package/components/routes/cases/hooks/useCase.d.ts

@@ -0,0 +1,13 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+interface CaseArguments {
+    case?: Case;
+    caseId?: string;
+}
+interface CaseResult {
+    case: Case;
+    update: (update: Partial<Case>, publish?: boolean) => Promise<void>;
+    loading: boolean;
+    missing: boolean;
+}
+declare const useCase: (args: CaseArguments) => CaseResult;
+export default useCase;

package/components/routes/cases/hooks/useCase.js

@@ -0,0 +1,51 @@
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useCallback, useEffect, useState } from 'react';
+const useCase = ({ caseId, case: providedCase }) => {
+    const { dispatchApi } = useMyApi();
+    const [loading, setLoading] = useState(false);
+    const [missing, setMissing] = useState(false);
+    const [_case, setCase] = useState(providedCase);
+    useEffect(() => {
+        if (providedCase) {
+            setCase(providedCase);
+        }
+    }, [providedCase]);
+    useEffect(() => {
+        if (caseId) {
+            setLoading(true);
+            dispatchApi(api.v2.case.get(caseId), { throwError: false })
+                .then(setCase)
+                .finally(() => setLoading(false));
+        }
+    }, [caseId, dispatchApi]);
+    const update = useCallback(async (_updatedCase, publish = true) => {
+        if (!_case?.case_id) {
+            return;
+        }
+        try {
+            if (publish) {
+                setCase(await dispatchApi(api.v2.case.put(_case.case_id, _updatedCase)));
+            }
+            else {
+                setCase(prevCase => {
+                    if (!prevCase) {
+                        return prevCase;
+                    }
+                    return {
+                        ...prevCase,
+                        ..._updatedCase
+                    };
+                });
+            }
+        }
+        catch (e) {
+            setMissing(true);
+        }
+        finally {
+            return;
+        }
+    }, [_case?.case_id, dispatchApi]);
+    return { case: _case, update, loading, missing };
+};
+export default useCase;

package/components/routes/cases/modals/AddToCaseModal.d.ts

@@ -0,0 +1,7 @@
+import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
+import type { Observable } from '@cccsaurora/howler-ui/models/entities/generated/Observable';
+import { type FC } from 'react';
+declare const AddToCaseModal: FC<{
+    records: (Hit | Observable)[];
+}>;
+export default AddToCaseModal;

package/components/routes/cases/modals/AddToCaseModal.js

@@ -0,0 +1,62 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete, Button, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import CaseCard from '@cccsaurora/howler-ui/components/elements/case/CaseCard';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const AddToCaseModal = ({ records }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { close } = useContext(ModalContext);
+    const [cases, setCases] = useState([]);
+    const [selectedCase, setSelectedCase] = useState(null);
+    const [path, setPath] = useState('');
+    const [title, setTitle] = useState('');
+    useEffect(() => {
+        dispatchApi(api.search.case.post({ query: 'case_id:*', rows: 100 }), { throwError: false }).then(result => {
+            if (result) {
+                setCases(result.items);
+            }
+        });
+    }, [dispatchApi]);
+    const folderOptions = useMemo(() => {
+        if (!selectedCase?.items) {
+            return [];
+        }
+        const paths = new Set();
+        for (const item of selectedCase.items) {
+            if (!item.path) {
+                continue;
+            }
+            const parts = item.path.split('/');
+            parts.pop();
+            for (let i = 1; i <= parts.length; i++) {
+                paths.add(parts.slice(0, i).join('/'));
+            }
+        }
+        return Array.from(paths).sort();
+    }, [selectedCase]);
+    const fullPath = path ? `${path}/${title}` : title;
+    const isValid = !!selectedCase && !!title;
+    const onSubmit = async () => {
+        if (!selectedCase || records?.length < 1) {
+            return;
+        }
+        await dispatchApi(api.v2.case.items.post(selectedCase.case_id, {
+            path: fullPath,
+            value: records[0].howler.id,
+            type: records[0].__index
+        }));
+        close();
+    };
+    // TODO: No support currently for multiple records
+    return (_jsxs(Stack, { spacing: 2, p: 2, sx: { minWidth: 'min(800px, 60vw)', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.add_to_case') }), _jsx(Autocomplete, { options: cases, getOptionLabel: option => option.title ?? option.case_id ?? '', isOptionEqualToValue: (option, value) => option.case_id === value.case_id, value: selectedCase, disablePortal: true, onChange: (_ev, newVal) => {
+                    setSelectedCase(newVal);
+                    setPath('');
+                }, renderOption: (props, option) => (_createElement("li", { ...props, key: option.case_id, style: { ...props.style, display: 'flex', justifyContent: 'stretch', alignItems: 'stretch' } },
+                    _jsx(CaseCard, { case: option, slotProps: { card: { sx: { width: '100%' } } } }))), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.add_to_case.select_case'), fullWidth: true })) }), selectedCase && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { freeSolo: true, disablePortal: true, options: folderOptions, value: path, onInputChange: (_ev, newVal) => setPath(newVal), renderInput: params => (_jsx(TextField, { ...params, size: "small", placeholder: t('modal.cases.add_to_case.select_path'), fullWidth: true })) }), _jsx(TextField, { size: "small", placeholder: t('modal.cases.add_to_case.title'), value: title, onChange: ev => setTitle(ev.target.value), fullWidth: true }), title && (_jsx(Typography, { variant: "caption", color: "textSecondary", children: t('modal.cases.add_to_case.full_path', { path: fullPath }) }))] })), _jsx("div", { style: { flex: 1 } }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: !isValid, onClick: onSubmit, children: t('confirm') })] })] }));
+};
+export default AddToCaseModal;

package/components/routes/cases/modals/RenameItemModal.d.ts

@@ -0,0 +1,9 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import type { Item } from '@cccsaurora/howler-ui/models/entities/generated/Item';
+import { type FC } from 'react';
+declare const RenameItemModal: FC<{
+    _case: Case;
+    leaf: Item;
+    onRenamed?: (updatedCase: Case) => void;
+}>;
+export default RenameItemModal;

package/components/routes/cases/modals/RenameItemModal.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useContext, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const RenameItemModal = ({ _case, leaf, onRenamed }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { close } = useContext(ModalContext);
+    const currentPath = leaf.path ?? '';
+    const lastSlash = currentPath.lastIndexOf('/');
+    const folderPrefix = lastSlash >= 0 ? currentPath.slice(0, lastSlash) : '';
+    const currentName = lastSlash >= 0 ? currentPath.slice(lastSlash + 1) : currentPath;
+    const [name, setName] = useState(currentName);
+    const newPath = folderPrefix ? `${folderPrefix}/${name}` : name;
+    const existingPaths = useMemo(() => new Set((_case.items ?? []).filter(item => item.value !== leaf.value).map(item => item.path)), [_case.items, leaf.value]);
+    const nameError = useMemo(() => {
+        if (!name.trim()) {
+            return t('modal.cases.rename_item.error.empty');
+        }
+        if (name.includes('/')) {
+            return t('modal.cases.rename_item.error.slash');
+        }
+        if (existingPaths.has(newPath)) {
+            return t('modal.cases.rename_item.error.taken');
+        }
+        return null;
+    }, [name, newPath, existingPaths, t]);
+    const isValid = !nameError;
+    const onSubmit = async () => {
+        if (!isValid || !_case.case_id || !leaf.value) {
+            return;
+        }
+        const updatedCase = await dispatchApi(api.v2.case.items.patch(_case.case_id, leaf.value, newPath));
+        if (updatedCase) {
+            onRenamed?.(updatedCase);
+            close();
+        }
+    };
+    return (_jsxs(Stack, { spacing: 2, p: 2, sx: { minWidth: 'min(600px, 60vw)' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.rename_item') }), folderPrefix && (_jsx(Typography, { variant: "body2", color: "textSecondary", children: t('modal.cases.rename_item.folder_path', { path: folderPrefix }) })), _jsx(TextField, { size: "small", label: t('modal.cases.rename_item.new_name'), value: name, onChange: ev => setName(ev.target.value), error: !!nameError, helperText: nameError ?? ' ', fullWidth: true, autoFocus: true, onKeyDown: ev => {
+                    if (ev.key === 'Enter' && isValid) {
+                        onSubmit();
+                    }
+                } }), _jsxs(Stack, { direction: "row", justifyContent: "flex-end", spacing: 1, children: [_jsx(Button, { onClick: close, color: "error", variant: "outlined", children: t('button.cancel') }), _jsx(Button, { onClick: onSubmit, color: "success", variant: "outlined", disabled: !isValid, children: t('button.confirm') })] })] }));
+};
+export default RenameItemModal;

package/components/routes/cases/modals/ResolveModal.d.ts

@@ -0,0 +1,7 @@
+import type { Case } from '@cccsaurora/howler-ui/models/entities/generated/Case';
+import { type FC } from 'react';
+declare const ResolveModal: FC<{
+    case: Case;
+    onConfirm: () => void;
+}>;
+export default ResolveModal;

package/components/routes/cases/modals/ResolveModal.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OpenInNew } from '@mui/icons-material';
+import { Autocomplete, Box, Button, Card, Chip, Divider, IconButton, LinearProgress, Skeleton, Stack, TextField, Typography } from '@mui/material';
+import api from '@cccsaurora/howler-ui/api';
+import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
+import { ModalContext } from '@cccsaurora/howler-ui/components/app/providers/ModalProvider';
+import AnalyticLink from '@cccsaurora/howler-ui/components/elements/hit/elements/AnalyticLink';
+import EscalationChip from '@cccsaurora/howler-ui/components/elements/hit/elements/EscalationChip';
+import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
+import useHitActions from '@cccsaurora/howler-ui/components/hooks/useHitActions';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { uniq } from 'lodash-es';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import useCase from '../hooks/useCase';
+const ResolveModal = ({ case: _case, onConfirm }) => {
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { close } = useContext(ModalContext);
+    const { config } = useContext(ApiConfigContext);
+    const { update: updateCase } = useCase({ case: _case });
+    const [loading, setLoading] = useState(true);
+    const [rationale, setRationale] = useState('');
+    const [assessment, setAssessment] = useState(null);
+    const [hits, setHits] = useState([]);
+    const hitIds = useMemo(() => uniq((_case?.items ?? [])
+        .filter(item => item.type === 'hit')
+        .map(item => item.value)
+        .filter(Boolean)), [_case?.items]);
+    const { assess } = useHitActions(hits);
+    useEffect(() => {
+        (async () => {
+            try {
+                const result = await dispatchApi(api.search.hit.post({
+                    query: `howler.id:(${hitIds.join(' OR ')}) AND -howler.status:resolved`,
+                    metadata: ['analytic']
+                }));
+                setHits(result.items);
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+    }, [dispatchApi, hitIds]);
+    const handleConfirm = async () => {
+        setLoading(true);
+        try {
+            await assess(assessment, true, rationale);
+            await updateCase({ status: 'resolved' });
+            onConfirm();
+            close();
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs(Stack, { spacing: 2, p: 2, alignItems: "start", sx: { minWidth: 'min(1000px, 60vw)', maxHeight: '100%', height: '100%' }, children: [_jsx(Typography, { variant: "h4", children: t('modal.cases.resolve') }), _jsx(Typography, { children: t('modal.cases.resolve.description') }), _jsxs(Stack, { spacing: 1, overflow: "auto", width: "100%", flex: 1, children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Box, { flex: 1, children: _jsx(TextField, { size: "small", fullWidth: true, placeholder: t('modal.rationale.label'), value: rationale, onChange: ev => setRationale(ev.target.value) }) }), _jsx(Box, { flex: 1, children: _jsx(Autocomplete, { size: "small", value: assessment, onChange: (_ev, _assessment) => setAssessment(_assessment), options: config.lookups['howler.assessment'], disablePortal: true, renderInput: params => (_jsx(TextField, { ...params, placeholder: t('hit.details.actions.assessment'), fullWidth: true })) }) })] }), _jsxs(Stack, { position: "relative", children: [_jsx(Divider, {}), _jsx(LinearProgress, { sx: { opacity: +loading } })] }), loading
+                        ? hitIds.map(id => _jsx(Skeleton, { variant: "rounded", height: "40px", width: "100%" }, id))
+                        : hits.map(hit => (_jsx(Card, { sx: { p: 1, flexShrink: 0 }, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, width: "100%", children: [_jsx(AnalyticLink, { hit: hit, compressed: true, alignSelf: "center" }), _jsx(EscalationChip, { hit: hit, layout: HitLayout.DENSE }), _jsx(Chip, { sx: { width: 'fit-content', display: 'inline-flex' }, label: hit.howler.status, size: "small", color: "primary" }), _jsx("div", { style: { flex: 1 } }), _jsx(IconButton, { size: "small", component: Link, to: `/hits/${hit.howler.id}`, children: _jsx(OpenInNew, { fontSize: "small" }) })] }) }, hit.howler.id)))] }), _jsxs(Stack, { direction: "row", spacing: 1, alignSelf: "end", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: close, children: t('cancel') }), _jsx(Button, { variant: "outlined", color: "success", disabled: loading || !assessment || !rationale, onClick: handleConfirm, children: t('confirm') })] })] }));
+};
+export default ResolveModal;

package/components/routes/dossiers/DossierEditor.js

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import QueryResultText from '../../elements/display/QueryResultText';
-import HitQuery from '../hits/search/HitQuery';
+import RecordQuery from '../hits/search/RecordQuery';
 import LeadForm from './LeadForm';
 import PivotForm from './PivotForm';
 const DossierEditor = () => {
@@ -188,6 +188,6 @@ const DossierEditor = () => {
                                             fontSize: '0.9em',
                                             fontStyle: 'italic',
                                             mb: 0.5
-                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(HitQuery, { disabled: !dossier || loading, onChange: (_val, isDirty) => setSearchDirty(isDirty), triggerSearch: query => setDossier(_dossier => ({ ..._dossier, query })) }), searchTotal >= 0 && _jsx(QueryResultText, { count: searchTotal, query: dossier.query })] }) }), _jsxs(Tabs, { value: tab, onChange: (_ev, value) => setTab(value), children: [_jsx(Tab, { label: t('route.dossiers.manager.tabs.leads'), value: "leads" }), _jsx(Tab, { label: t('route.dossiers.manager.tabs.pivots'), value: "pivots" })] }), tab === 'leads' && _jsx(LeadForm, { dossier: dossier, setDossier: setDossier, loading: loading }), tab === 'pivots' && _jsx(PivotForm, { dossier: dossier, setDossier: setDossier, loading: loading })] })] }) }));
+                                        }), variant: "body2", children: t('hit.search.prompt') }), _jsx(RecordQuery, { disabled: !dossier || loading, onChange: (_val, isDirty) => setSearchDirty(isDirty), triggerSearch: query => setDossier(_dossier => ({ ..._dossier, query })) }), searchTotal >= 0 && _jsx(QueryResultText, { count: searchTotal, query: dossier.query })] }) }), _jsxs(Tabs, { value: tab, onChange: (_ev, value) => setTab(value), children: [_jsx(Tab, { label: t('route.dossiers.manager.tabs.leads'), value: "leads" }), _jsx(Tab, { label: t('route.dossiers.manager.tabs.pivots'), value: "pivots" })] }), tab === 'leads' && _jsx(LeadForm, { dossier: dossier, setDossier: setDossier, loading: loading }), tab === 'pivots' && _jsx(PivotForm, { dossier: dossier, setDossier: setDossier, loading: loading })] })] }) }));
 };
 export default memo(DossierEditor);

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

@@ -61,7 +61,7 @@ vi.mock('commons/components/pages/PageCenter', () => ({
 vi.mock('../../elements/display/QueryResultText', () => ({
     default: ({ count, query }) => (_jsxs("div", { id: "query-result-text", children: [count, " ", ' results for ', " ", query] }))
 }));
-vi.mock('../hits/search/HitQuery', () => ({
+vi.mock('../hits/search/RecordQuery', () => ({
     default: ({ onChange, triggerSearch, disabled }) => {
         return (_jsxs("div", { id: "hit-query", children: [_jsx("input", { id: "query-input", disabled: disabled, onChange: e => {
                         onChange?.(e.target.value, false);

package/components/routes/help/ApiDocumentation.js

@@ -49,7 +49,7 @@ const ApiDocumentation = () => {
                                             .replace(/(\S+)\s+=>\s+(.+)/g, '\n`$1`: $2\n')
                                             .replace(/(Data Block:\n)([\s\S]+)(Result Example:)/, (__, p1, p2, p3) => `${p1}\`\`\`\n${p2.trim()}\n\`\`\`\n${p3}`)
                                             .replace(/(Result Example:\n)([\s\S]+)$/, (__, p1, p2) => `${p1}\`\`\`\n${p2.trim()}\n\`\`\``) }));
-                                    return (_jsxs(Fragment, { children: [_jsxs(TableRow, { style: { marginBottom: '1rem' }, sx: [isLg && { '& > td': { borderBottom: 0 } }], children: [_jsx(TableCell, { children: _jsxs(Stack, { direction: "column", spacing: 1, alignItems: "start", children: [_jsx(Typography, { children: endpoint.name }), _jsx("code", { children: endpoint.path }), _jsxs(Stack, { direction: "row", spacing: 1, children: [endpoint.complete ? (_jsx(Chip, { size: "small", label: "Stable", color: "success" })) : (_jsx(Chip, { size: "small", label: "Unstable", color: "error" })), endpoint.protected ? (_jsx(Chip, { size: "small", label: "Protected", color: "warning" })) : (_jsx(Chip, { size: "small", label: "Unprotected" }))] }), _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.methods.map(m => (_jsx(Chip, { size: "small", label: m }, m))) }), endpoint.ui_only && _jsx(Chip, { size: "small", label: "UI Only" })] }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_type.map(type => (_jsx(Chip, { size: "small", label: type, color: user.roles?.includes(type) ? 'success' : 'default' }, type))) }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_priv.map((p) => (_jsx(Chip, { size: "small", label: t(APIKEY_LABELS[p]) }, p))) }) }), !isLg && _jsx(TableCell, { children: documentationCell })] }), isLg && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { '& pre': { whiteSpace: 'pre-wrap' } }, children: documentationCell }) }))] }, endpoint.id));
+                                    return (_jsxs(Fragment, { children: [_jsxs(TableRow, { style: { marginBottom: '1rem' }, sx: [isLg && { '& > td': { borderBottom: 0 } }], children: [_jsx(TableCell, { children: _jsxs(Stack, { direction: "column", spacing: 1, alignItems: "start", children: [_jsx(Typography, { children: endpoint.name }), _jsx("code", { children: endpoint.path }), _jsxs(Stack, { direction: "row", spacing: 1, children: [endpoint.complete ? (_jsx(Chip, { label: "Stable", color: "success" })) : (_jsx(Chip, { label: "Unstable", color: "error" })), endpoint.protected ? (_jsx(Chip, { label: "Protected", color: "warning" })) : (_jsx(Chip, { label: "Unprotected" }))] }), _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.methods.map(m => (_jsx(Chip, { size: "small", label: m }, m))) }), endpoint.ui_only && _jsx(Chip, { label: "UI Only" })] }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_type.map(type => (_jsx(Chip, { size: "small", label: type, color: user.roles?.includes(type) ? 'success' : 'default' }, type))) }) }), _jsx(TableCell, { children: _jsx(Stack, { spacing: 1, direction: "row", children: endpoint.required_priv.map((p) => (_jsx(Chip, { size: "small", label: t(APIKEY_LABELS[p]) }, p))) }) }), !isLg && _jsx(TableCell, { children: documentationCell })] }), isLg && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { '& pre': { whiteSpace: 'pre-wrap' } }, children: documentationCell }) }))] }, endpoint.id));
                                 }) })] }) })] }) }));
 };
 export default ApiDocumentation;

package/components/routes/help/HitBannerDocumentation.js

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 const HitBannerDocumentation = () => {
     const { t } = useTranslation();
     const dummyHit = useMemo(() => ({
+        __index: 'hit',
         timestamp: '2023-02-11T15:10:31.585826Z',
         howler: {
             id: 'howler.id',

package/components/routes/help/HitDocumentation.js

@@ -5,7 +5,6 @@ import { useScrollRestoration } from '@cccsaurora/howler-ui/components/hooks/use
 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';
@@ -23,8 +22,7 @@ const HitDocumentation = () => {
         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, {}),
+    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.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: {
                         header: () => _jsx(HitBannerDocumentation, {}),
                         links: () => _jsx(HitLinksDocumentation, {}),
                         labels: () => _jsx(HitLabelsDocumentation, {}),

package/components/routes/hits/search/InformationPane.d.ts

@@ -1,5 +1,6 @@
 import type { FC } from 'react';
 declare const InformationPane: FC<{
+    selected?: string;
     onClose?: () => void;
 }>;
 export default InformationPane;

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

@@ -4,29 +4,28 @@ import { Badge, Box, Divider, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, u
 import TuiIconButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomIconButton';
 import { Icon } from '@iconify/react';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
-import { HitContext } from '@cccsaurora/howler-ui/components/app/providers/HitProvider';
 import { ParameterContext } from '@cccsaurora/howler-ui/components/app/providers/ParameterProvider';
+import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import VSBox from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBox';
 import VSBoxContent from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxContent';
 import VSBoxHeader from '@cccsaurora/howler-ui/components/elements/addons/layout/vsbox/VSBoxHeader';
 import Phrase from '@cccsaurora/howler-ui/components/elements/addons/search/phrase/Phrase';
-import BundleButton from '@cccsaurora/howler-ui/components/elements/display/icons/BundleButton';
 import SocketBadge from '@cccsaurora/howler-ui/components/elements/display/icons/SocketBadge';
 import JSONViewer from '@cccsaurora/howler-ui/components/elements/display/json/JSONViewer';
 import HitActions from '@cccsaurora/howler-ui/components/elements/hit/HitActions';
 import HitBanner from '@cccsaurora/howler-ui/components/elements/hit/HitBanner';
-import HitComments from '@cccsaurora/howler-ui/components/elements/hit/HitComments';
-import HitDetails from '@cccsaurora/howler-ui/components/elements/hit/HitDetails';
 import HitLabels from '@cccsaurora/howler-ui/components/elements/hit/HitLabels';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import HitLinks from '@cccsaurora/howler-ui/components/elements/hit/HitLinks';
 import HitOutline from '@cccsaurora/howler-ui/components/elements/hit/HitOutline';
 import HitOverview from '@cccsaurora/howler-ui/components/elements/hit/HitOverview';
-import HitRelated from '@cccsaurora/howler-ui/components/elements/hit/HitRelated';
 import HitSummary from '@cccsaurora/howler-ui/components/elements/hit/HitSummary';
-import HitWorklog from '@cccsaurora/howler-ui/components/elements/hit/HitWorklog';
+import ObjectDetails from '@cccsaurora/howler-ui/components/elements/ObjectDetails';
+import RecordComments from '@cccsaurora/howler-ui/components/elements/record/RecordComments';
+import RecordRelated from '@cccsaurora/howler-ui/components/elements/record/RecordRelated';
+import RecordWorklog from '@cccsaurora/howler-ui/components/elements/record/RecordWorklog';
 import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
 import ErrorBoundary from '@cccsaurora/howler-ui/components/routes/ErrorBoundary';
 import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
@@ -37,17 +36,18 @@ import { useLocation } from 'react-router-dom';
 import { useContextSelector } from 'use-context-selector';
 import { getUserList } from '@cccsaurora/howler-ui/utils/hitFunctions';
 import { validateRegex } from '@cccsaurora/howler-ui/utils/stringUtils';
+import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { tryParse } from '@cccsaurora/howler-ui/utils/utils';
 import LeadRenderer from '../view/LeadRenderer';
-const InformationPane = ({ onClose }) => {
+const InformationPane = ({ onClose, selected: _selected }) => {
     const { t, i18n } = useTranslation();
     const theme = useTheme();
     const location = useLocation();
     const { emit, isOpen } = useContext(SocketContext);
     const { getMatchingOverview, getMatchingDossiers, getMatchingAnalytic } = useMatchers();
-    const selected = useContextSelector(ParameterContext, ctx => ctx.selected);
+    const selected = useContextSelector(ParameterContext, ctx => ctx?.selected) ?? _selected;
     const pluginStore = usePluginStore();
-    const getHit = useContextSelector(HitContext, ctx => ctx.getHit);
+    const getRecord = useContextSelector(RecordContext, ctx => ctx.getRecord);
     const [userIds, setUserIds] = useState(new Set());
     const [analytic, setAnalytic] = useState();
     const [hasOverview, setHasOverview] = useState(false);
@@ -58,7 +58,7 @@ const InformationPane = ({ onClose }) => {
     const [_dossiers, setDossiers] = useState(null);
     const dossiers = useMemo(() => _dossiers ?? [], [_dossiers]);
     const users = useMyUserList(userIds);
-    const hit = useContextSelector(HitContext, ctx => ctx.hits[selected]);
+    const record = useContextSelector(RecordContext, ctx => ctx.records[selected]);
     howlerPluginStore.plugins.forEach(plugin => {
         pluginStore.executeFunction(`${plugin}.on`, 'viewing');
     });
@@ -66,14 +66,14 @@ const InformationPane = ({ onClose }) => {
         if (!selected) {
             return;
         }
-        if (!hit?.howler.data) {
+        if (!record?.howler.data) {
             setLoading(true);
-            getHit(selected, true).finally(() => setLoading(false));
+            getRecord(selected, true).finally(() => setLoading(false));
             return;
         }
-        setUserIds(getUserList(hit));
+        setUserIds(getUserList(record));
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getHit, selected]);
+    }, [getRecord, selected]);
     useEffect(() => {
         if (selected) {
             setAnalytic(null);
@@ -82,23 +82,20 @@ const InformationPane = ({ onClose }) => {
         }
     }, [selected]);
     useEffect(() => {
-        if (hit && !analytic) {
-            getMatchingAnalytic(hit).then(setAnalytic);
+        if (isHit(record) && !analytic) {
+            getMatchingAnalytic(record).then(setAnalytic);
         }
-    }, [analytic, getMatchingAnalytic, hit]);
+    }, [analytic, getMatchingAnalytic, record]);
     useEffect(() => {
-        if (hit && !_dossiers) {
-            getMatchingDossiers(hit).then(setDossiers);
+        if (isHit(record) && !_dossiers) {
+            getMatchingDossiers(record).then(setDossiers);
         }
-    }, [_dossiers, getMatchingDossiers, hit]);
+    }, [_dossiers, getMatchingDossiers, record]);
     useEffect(() => {
-        getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
-    }, [getMatchingOverview, hit]);
-    useEffect(() => {
-        if (tab === 'hit_aggregate' && !hit?.howler.is_bundle) {
-            setTab('overview');
+        if (isHit(record)) {
+            getMatchingOverview(record).then(_overview => setHasOverview(!!_overview));
         }
-    }, [hit?.howler.is_bundle, tab]);
+    }, [getMatchingOverview, record]);
     useEffect(() => {
         if (selected && isOpen()) {
             emit({
@@ -122,48 +119,37 @@ const InformationPane = ({ onClose }) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasOverview]);
-    /**
-     * What to show as the header? If loading a skeleton, then it depends on bundle or not. Bundles don't
-     * show anything while normal hits do
-     */
-    const header = useMemo(() => {
-        if (loading && !hit?.howler?.is_bundle) {
-            return _jsx(Skeleton, { variant: "rounded", height: 152 });
-        }
-        else if (!!hit && !hit.howler.is_bundle) {
-            return _jsx(HitBanner, { layout: HitLayout.DENSE, hit: hit });
-        }
-        else {
-            return null;
-        }
-    }, [hit, loading]);
     const tabContent = useMemo(() => {
         if (!tab) {
             return;
         }
+        const defaultContent = {
+            details: () => _jsx(ObjectDetails, { obj: record }),
+            comments: () => _jsx(RecordComments, { record: record, users: users }),
+            raw: () => _jsx(JSONViewer, { data: !loading && record, hideSearch: true, filter: filter }),
+            data: () => (_jsx(JSONViewer, { data: !loading && record?.howler?.data?.map(entry => tryParse(entry)), collapse: false, hideSearch: true, filter: filter })),
+            related: () => _jsx(RecordRelated, { record: record }),
+            worklog: () => _jsx(RecordWorklog, { record: !loading && record, users: users })
+        };
+        if (!isHit(record)) {
+            return defaultContent[tab]?.();
+        }
         return {
-            overview: () => _jsx(HitOverview, { hit: hit }),
-            details: () => _jsx(HitDetails, { hit: hit }),
-            hit_comments: () => _jsx(HitComments, { hit: hit, users: users }),
-            hit_raw: () => _jsx(JSONViewer, { data: !loading && hit, hideSearch: true, filter: filter }),
-            hit_data: () => (_jsx(JSONViewer, { data: !loading && hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false, hideSearch: true, filter: filter })),
-            hit_worklog: () => _jsx(HitWorklog, { hit: !loading && hit, users: users }),
+            ...defaultContent,
+            overview: () => _jsx(HitOverview, { hit: record }),
             hit_aggregate: () => _jsx(HitSummary, {}),
-            hit_related: () => _jsx(HitRelated, { hit: hit }),
-            ...Object.fromEntries((hit?.howler.dossier ?? []).map((lead, index) => [
+            ...Object.fromEntries((record?.howler.dossier ?? []).map((lead, index) => [
                 'lead:' + index,
-                () => _jsx(LeadRenderer, { lead: lead, hit: hit })
+                () => _jsx(LeadRenderer, { lead: lead, hit: record })
             ])),
             ...Object.fromEntries(dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => [
                 `external-lead:${dossierIndex}:${leadIndex}`,
-                () => _jsx(LeadRenderer, { lead: _lead, hit: hit })
+                () => _jsx(LeadRenderer, { lead: _lead, hit: record })
             ])))
         }[tab]?.();
-    }, [dossiers, filter, hit, loading, tab, users]);
+    }, [dossiers, filter, record, loading, tab, users]);
     const hasError = useMemo(() => !validateRegex(filter), [filter]);
-    return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [_jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, sx: [hit?.howler?.is_bundle && { position: 'absolute', top: 1, right: 0, zIndex: 1100 }], children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('hit.panel.analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), hit?.howler.bundles?.length > 0 && _jsx(BundleButton, { ids: hit.howler.bundles, disabled: loading }), !!hit && !hit.howler.is_bundle && (_jsx(TuiIconButton, { tooltip: t('hit.panel.open'), href: `/hits/${selected}`, disabled: !hit || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), _jsx(Box, { pr: 2, children: header }), !!hit &&
-                        !hit.howler.is_bundle &&
-                        (!loading ? (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: hit, layout: HitLayout.DENSE, forceAllFields: true }), _jsx(HitLabels, { hit: hit })] })) : (_jsx(Skeleton, { height: 124 }))), _jsx(HitLinks, { hit: hit, analytic: analytic, dossiers: dossiers }), _jsxs(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: [_jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: {
+    return (_jsxs(VSBox, { top: 10, sx: { height: '100%', flex: 1 }, children: [_jsxs(Stack, { direction: "column", flex: 1, sx: { overflowY: 'auto', flexGrow: 1 }, position: "relative", spacing: 1, ml: 2, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, flexShrink: 0, pr: 2, children: [_jsx(FlexOne, {}), onClose && !location.pathname.startsWith('/bundles') && (_jsx(TuiIconButton, { size: "small", onClick: onClose, tooltip: t('hit.panel.details.exit'), children: _jsx(Clear, {}) })), _jsx(SocketBadge, { size: "small" }), analytic && (_jsx(TuiIconButton, { size: "small", tooltip: t('analytic.open'), disabled: !analytic || loading, route: `/analytics/${analytic.analytic_id}`, children: _jsx(QueryStats, {}) })), !!record && (_jsx(TuiIconButton, { tooltip: t(`${record.__index}.open`), href: `/${record.__index}s/${selected}`, disabled: !record || loading, size: "small", target: "_blank", children: _jsx(OpenInNew, {}) }))] }), isHit(record) && (_jsxs(_Fragment, { children: [_jsx(Box, { pr: 2, children: _jsx(HitBanner, { layout: HitLayout.DENSE, hit: record }) }), !loading && (_jsxs(_Fragment, { children: [_jsx(HitOutline, { hit: record, layout: HitLayout.DENSE, forceAllFields: true }), _jsx(HitLabels, { hit: record })] })), _jsx(HitLinks, { hit: record, analytic: analytic, dossiers: dossiers })] })), loading && (_jsxs(_Fragment, { children: [_jsx(Skeleton, { variant: "rounded", height: 152 }), _jsx(Skeleton, { height: 124 })] })), _jsxs(VSBoxHeader, { ml: -1, mr: -1, pb: 1, sx: { top: '0px' }, children: [_jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     pr: 2,
@@ -185,17 +171,18 @@ const InformationPane = ({ onClose }) => {
                                             right: 0
                                         }
                                     }
-                                }, variant: "scrollable", children: [_jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
+                                }, variant: "scrollable", children: [_jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('viewer.comments'), children: _jsx(Badge, { sx: {
                                                     '& > .MuiBadge-badge': {
                                                         backgroundColor: theme.palette.divider,
                                                         zIndex: 1,
                                                         right: theme.spacing(-0.5)
                                                     },
                                                     '& > svg': { zIndex: 2 }
-                                                }, badgeContent: hit?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "hit_comments", onClick: () => setTab('hit_comments') }), hit?.howler?.is_bundle && (_jsx(Tab, { label: t('hit.viewer.aggregate'), value: "hit_aggregate", onClick: () => setTab('hit_aggregate') })), hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
-                                    // eslint-disable-next-line react/no-array-index-key
-                                    , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
+                                                }, badgeContent: record?.howler.comment?.length ?? 0, children: _jsx(Comment, {}) }) }), value: "comments", onClick: () => setTab('comments') }), isHit(record) && hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), isHit(record) &&
+                                        record?.howler.dossier?.map((lead, index) => (_jsx(Tab
+                                        // eslint-disable-next-line react/no-array-index-key
+                                        , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
                                     // eslint-disable-next-line react/no-array-index-key
-                                    , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label.en : _lead.label.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "hit_data", onClick: () => setTab('hit_data'), disabled: !hit?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "hit_raw", onClick: () => setTab('hit_raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.worklog'), children: _jsx(History, {}) }), value: "hit_worklog", onClick: () => setTab('hit_worklog') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.related'), children: _jsx(LinkSharp, {}) }), value: "hit_related", onClick: () => setTab('hit_related') })] }), ['hit_raw', 'hit_data'].includes(tab) && (_jsx(Phrase, { sx: { mt: 1, pr: 1 }, value: filter, onChange: setFilter, error: hasError, label: t('json.viewer.search.label'), placeholder: t('json.viewer.search.prompt'), endAdornment: _jsx(IconButton, { onClick: () => setFilter(''), children: _jsx(Clear, {}) }) }))] }), _jsx(ErrorBoundary, { children: _jsx(VSBoxContent, { mr: -1, ml: -1, height: "100%", children: _jsx(Stack, { height: "100%", flex: 1, children: tabContent }) }) })] }), !!hit && hit?.howler && (_jsxs(Box, { pr: 2, bgcolor: theme.palette.background.default, position: "relative", children: [_jsx(Divider, { orientation: "horizontal" }), _jsx(HitActions, { hit: hit })] }))] }));
+                                    , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label.en : _lead.label.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "data", onClick: () => setTab('data'), disabled: !record?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "raw", onClick: () => setTab('raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.worklog'), children: _jsx(History, {}) }), value: "worklog", onClick: () => setTab('worklog') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.related'), children: _jsx(LinkSharp, {}) }), value: "related", onClick: () => setTab('related') })] }), ['raw', 'data'].includes(tab) && (_jsx(Phrase, { sx: { mt: 1, pr: 1 }, value: filter, onChange: setFilter, error: hasError, label: t('json.viewer.search.label'), placeholder: t('json.viewer.search.prompt'), endAdornment: _jsx(IconButton, { onClick: () => setFilter(''), children: _jsx(Clear, {}) }) }))] }), _jsx(ErrorBoundary, { children: _jsx(VSBoxContent, { mr: -1, ml: -1, height: "100%", children: _jsx(Stack, { height: "100%", flex: 1, children: tabContent }) }) })] }), isHit(record) && (_jsxs(Box, { pr: 2, bgcolor: theme.palette.background.default, position: "relative", children: [_jsx(Divider, { orientation: "horizontal" }), _jsx(HitActions, { hit: record })] }))] }));
 };
 export default InformationPane;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDropDown, InfoOutlined, List, Settings, TableChart, ViewComfy, ViewCompact, ViewModule } from '@mui/icons-material';
 import { Checkbox, Divider, FormLabel, Stack, TextField, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
-import { HitSearchContext } from '@cccsaurora/howler-ui/components/app/providers/HitSearchProvider';
+import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
@@ -10,8 +10,8 @@ import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 const LayoutSettings = () => {
     const { t } = useTranslation();
-    const displayType = useContextSelector(HitSearchContext, ctx => ctx.displayType);
-    const setDisplayType = useContextSelector(HitSearchContext, ctx => ctx.setDisplayType);
+    const displayType = useContextSelector(RecordSearchContext, ctx => ctx.displayType);
+    const setDisplayType = useContextSelector(RecordSearchContext, ctx => ctx.setDisplayType);
     const [hitLayout, setHitLayout] = useMyLocalStorageItem(StorageKey.HIT_LAYOUT, false);
     const [templateFieldCount, setTemplateFieldCount] = useMyLocalStorageItem(StorageKey.TEMPLATE_FIELD_COUNT, null);
     return (_jsx(ChipPopper, { icon: _jsx(Tooltip, { title: t('search.layout.settings'), children: _jsx(Settings, {}) }), deleteIcon: _jsx(ArrowDropDown, {}), toggleOnDelete: true, disablePortal: false, slotProps: { chip: { size: 'medium', 'aria-label': t('search.layout.settings') } }, placement: "bottom-end", children: _jsxs(Stack, { spacing: 1, alignItems: "start", children: [_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "display_type", children: t('page.settings.local.hits.display_type') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.display_type.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(ToggleButtonGroup, { exclusive: true, value: displayType, onChange: (__, value) => setDisplayType(value), size: "small", "aria-labelledby": "display_type", children: [_jsx(ToggleButton, { value: "list", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(List, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.list') })] }) }), _jsx(ToggleButton, { value: "grid", children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(TableChart, {}), _jsx("span", { children: t('page.settings.local.hits.display_type.grid') })] }) })] }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "layout", children: t('page.settings.local.hits.layout') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.layout.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(ToggleButtonGroup, { exclusive: true, size: "small", value: hitLayout, onChange: (_, value) => setHitLayout(value), "aria-labelledby": "layout", children: [_jsx(ToggleButton, { value: HitLayout.DENSE, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewCompact, {}), _jsx("span", { children: t('page.settings.local.hits.layout.dense') })] }) }), _jsx(ToggleButton, { value: HitLayout.NORMAL, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewModule, {}), _jsx("span", { children: t('page.settings.local.hits.layout.normal') })] }) }), _jsx(ToggleButton, { value: HitLayout.COMFY, children: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(ViewComfy, {}), _jsx("span", { children: t('page.settings.local.hits.layout.comfy') })] }) })] }), _jsx(Divider, { flexItem: true }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", alignSelf: "stretch", children: [_jsx(FormLabel, { id: "field_count", children: t('page.settings.local.hits.field_count') }), _jsx("div", { style: { flex: 1 } }), _jsx(Tooltip, { title: t('page.settings.local.hits.field_count.description'), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }), _jsxs(Stack, { direction: "row", spacing: 0.5, alignSelf: "stretch", children: [_jsx(Checkbox, { checked: templateFieldCount !== null, onChange: (_, checked) => setTemplateFieldCount(checked ? 3 : null), size: "small" }), _jsx(TextField, { type: "number", size: "small", disabled: templateFieldCount === null, value: templateFieldCount ?? 3, fullWidth: true, onChange: e => {