@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1607

package/components/elements/hit/HitSummary.js

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
-import { getTimeRange } from '@cccsaurora/howler-ui/utils/utils';
+import { getTimeRange, notNil } from '@cccsaurora/howler-ui/utils/utils';
 import PluginChip from '../PluginChip';
 import HitGraph from './aggregate/HitGraph';
 const HitSummary = ({ response, onStart, onComplete }) => {
@@ -100,7 +100,7 @@ const HitSummary = ({ response, onStart, onComplete }) => {
             }
         }
         catch (e) {
-            showErrorMessage(e);
+            showErrorMessage(e instanceof Error ? e.message : String(e));
             setAggregateResults({});
         }
         finally {
@@ -117,26 +117,26 @@ const HitSummary = ({ response, onStart, onComplete }) => {
         onComplete,
         onStart,
         pageCount,
-        query,
-        response?.items,
         showErrorMessage,
-        t
+        t,
+        response?.items,
+        query
     ]);
     const setSearch = useCallback((key, value) => {
         setQuery(`${key}:${value}`);
     }, [setQuery]);
     useEffect(() => {
-        if ((!query && views?.length < 1) || searching || error) {
+        if ((!query && (views?.length ?? 0) < 1) || searching || error) {
             return;
         }
         void performAggregation();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [query, views, searching, error]);
-    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), showHitSummaryGraph && (_jsxs(_Fragment, { children: [_jsx(HitGraph, {}), _jsx(Divider, { flexItem: true })] })), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
+    return (_jsxs(Stack, { sx: { mx: 2, height: '100%' }, spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('hit.summary.aggregate.title') }), _jsx(Divider, { flexItem: true }), showHitSummaryGraph && (_jsxs(_Fragment, { children: [_jsx(HitGraph, {}), _jsx(Divider, { flexItem: true })] })), _jsxs(Stack, { sx: { overflow: 'auto', marginTop: '0 !important' }, pt: 1, spacing: 1, children: [_jsxs(Stack, { direction: "row", spacing: 2, mb: 2, alignItems: "stretch", children: [_jsx(Autocomplete, { fullWidth: true, multiple: true, sx: { minWidth: '175px' }, size: "small", value: customKeys, options: hitFields.map(_field => _field.key), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.summary.adhoc') }), onChange: (_, value) => setCustomKeys(value.filter(notNil)) }), _jsx(Button, { variant: "outlined", startIcon: loading ? _jsx(CircularProgress, { size: 20, sx: { ml: 1 } }) : _jsx(Analytics, { sx: { ml: 1 } }), disabled: loading, onClick: () => performAggregation(), children: t('button.aggregate') })] }), isEmpty(aggregateResults) && (_jsxs(Alert, { severity: "info", variant: "outlined", children: [_jsx(AlertTitle, { children: t('hit.summary.aggregate.nokeys.title') }), t('hit.summary.aggregate.nokeys.description')] })), loading && _jsx(LinearProgress, { sx: { minHeight: '4px' } }), Object.keys(aggregateResults)
                         .filter(key => !isEmpty(aggregateResults[key]))
                         .flatMap(key => [
                         _jsx(Fade, { in: true, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "body1", children: key }, key + '-title'), keyCounts[key]?.count < 0 ? (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", t('hit.summary.adhoc.custom'), ")"] })) : (_jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["(", keyCounts[key]?.count ?? '?', " ", t('references'), ")"] })), _jsx(Tooltip, { title: _jsxs(Stack, { children: [_jsx(Typography, { variant: "caption", children: t('hit.summary.aggregate.sources') }), keyCounts[key]?.sources.map(source => (_jsx(Typography, { variant: "caption", children: source }, source))) ?? '?'] }), children: _jsx(InfoOutlined, { fontSize: "inherit" }) })] }) }, key + '-refs'),
-                        _jsx(Fade, { in: true, children: hitFields.find(f => f.key === key)?.type !== 'date' ? (_jsx(Box, { sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), children: _jsx(Grid, { container: true, sx: theme => ({ mr: 1, mt: theme.spacing(-1) }), spacing: 1, children: Object.keys(aggregateResults[key]).map(item => (_jsx(Grid, { item: true, xs: "auto", children: _jsx(PluginChip, { context: "summary", size: "small", variant: "filled", value: item, label: `${item} (${aggregateResults[key][item]})`, onClick: () => setSearch(key, `"${item}"`), field: key }) }, item))) }, key + '-list') })) : (_jsx(Chip, { size: "small", sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), label: getTimeRange(Object.keys(aggregateResults[key]))
+                        _jsx(Fade, { in: true, children: hitFields.find(f => f.key === key)?.type !== 'date' ? (_jsx(Box, { sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), children: _jsx(Grid, { container: true, sx: theme => ({ mr: 1, mt: theme.spacing(-1) }), spacing: 1, children: Object.keys(aggregateResults[key]).map(item => (_jsx(Grid, { size: 'auto', children: _jsx(PluginChip, { context: "summary", size: "small", variant: "filled", value: item, label: `${item} (${aggregateResults[key][item]})`, onClick: () => setSearch(key, `"${item}"`), field: key }) }, item))) }, key + '-list') })) : (_jsx(Chip, { size: "small", sx: theme => ({ ml: `${theme.spacing(1)} !important`, alignSelf: 'start' }), label: getTimeRange(Object.keys(aggregateResults[key]))
                                     .map(d => new Date(d).toLocaleString())
                                     .join(' - '), onClick: () => setSearch(key, `[${getTimeRange(Object.keys(aggregateResults[key])).join(' TO ')}]`) })) }, key + '-results')
                     ])] })] }));

package/components/elements/hit/PivotTooltip.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Link, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 const PivotTooltip = ({ dossier, resolvedUrl }) => {
-    const dossierUrl = `/dossiers/${dossier.dossier_id}/edit?tab=leads&query=${encodeURIComponent(dossier.query)}`;
+    const dossierUrl = `/dossiers/${dossier.dossier_id}/edit?tab=leads&query=${encodeURIComponent(dossier.query ?? '')}`;
     const { t } = useTranslation();
     return (_jsxs(Box, { sx: { maxWidth: 300 }, children: [_jsx(Typography, { variant: "subtitle2", children: dossier.title }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: dossier.owner }), _jsx(Typography, { variant: "body2", sx: { mt: 2 }, children: dossier.leads?.[0]?.content?.slice(0, 120) ?? t('pivot.description.none') }), _jsxs(Box, { sx: { mt: 2, wordBreak: 'break-all' }, children: [_jsx(Typography, { variant: "caption", display: "block", children: t('pivot.url') }), _jsx(Link, { href: resolvedUrl, target: "_blank", rel: "noopener noreferrer", underline: "hover", children: resolvedUrl })] }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Link, { href: dossierUrl, target: "_blank", rel: "noopener noreferrer", underline: "hover", children: t('pivot.dossier.open') }) })] }));
 };

package/components/elements/hit/actions/ButtonActions.js

@@ -42,8 +42,8 @@ const ButtonActions = ({ actions, loading, orientation, shortcuts, currentVote }
             bottom.push(action);
         }
         return [top, bottom];
-    }, [[], []]) ?? [], [actions]);
-    return (_jsxs(Stack, { direction: isHorizontal ? 'row' : 'column', spacing: 0.75, alignItems: !isHorizontal && 'start', py: 1, sx: { position: 'relative', flex: 1 }, justifyContent: "space-between", children: [_jsxs(FormControl, { disabled: loading, sx: [
+    }, [[], []]), [actions]);
+    return (_jsxs(Stack, { direction: isHorizontal ? 'row' : 'column', spacing: 0.75, alignItems: isHorizontal ? undefined : 'start', py: 1, sx: { position: 'relative', flex: 1 }, justifyContent: "space-between", children: [_jsxs(FormControl, { disabled: loading, sx: [
                     {
                         display: 'grid',
                         justifyContent: 'stretch',

package/components/elements/hit/actions/DropdownActions.js

@@ -9,11 +9,11 @@ const DropdownActions = ({ actions, currentAssessment, currentStatus, currentVot
     const config = useContext(ApiConfigContext);
     const isHorizontal = useMemo(() => orientation === 'horizontal', [orientation]);
     if (!config.config.lookups) {
-        return (_jsxs(Grid, { container: true, justifyContent: "end", spacing: 4, p: 2, children: [_jsx(Grid, { item: true, sm: "auto", xs: 12, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) }), _jsx(Grid, { item: true, sm: "auto", xs: 12, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) }), _jsx(Grid, { item: true, sm: "auto", xs: 12, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) })] }));
+        return (_jsxs(Grid, { container: true, justifyContent: "end", spacing: 4, p: 2, children: [_jsx(Grid, { size: { sm: 'auto', xs: 12 }, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) }), _jsx(Grid, { size: { sm: 'auto', xs: 12 }, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) }), _jsx(Grid, { size: { sm: 'auto', xs: 12 }, children: _jsx(Skeleton, { variant: "rounded", width: "200px", height: orientation === 'horizontal' ? '40px' : '56px' }) })] }));
     }
-    return (_jsxs(Grid, { container: true, justifyContent: "end", spacing: 2, p: 2, sx: [isHorizontal && { [`& .${formControlClasses.root}`]: { minWidth: '140px' } }], children: [_jsx(Grid, { item: true, sm: !isHorizontal ? true : 'auto', xs: 12, children: _jsxs(FormControl, { disabled: loading, fullWidth: true, children: [_jsx(InputLabel, { id: "transition-label", htmlFor: "transition", children: t('hit.details.actions.action') }), _jsxs(Select, { labelId: "transition-label", id: "transition", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.action'), value: currentStatus, children: [_jsx(MenuItem, { value: currentStatus, sx: { display: 'none' }, children: currentStatus.replace(/-/g, ' ').replace(/^[a-z]/, val => val.toUpperCase()) }), actions
+    return (_jsxs(Grid, { container: true, justifyContent: "end", spacing: 2, p: 2, sx: [isHorizontal && { [`& .${formControlClasses.root}`]: { minWidth: '140px' } }], children: [_jsx(Grid, { size: { sm: !isHorizontal ? 'grow' : 'auto', xs: 12 }, children: _jsxs(FormControl, { disabled: loading, fullWidth: true, children: [_jsx(InputLabel, { id: "transition-label", htmlFor: "transition", children: t('hit.details.actions.action') }), _jsxs(Select, { labelId: "transition-label", id: "transition", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.action'), value: currentStatus, children: [_jsx(MenuItem, { value: currentStatus, sx: { display: 'none' }, children: currentStatus.replace(/-/g, ' ').replace(/^[a-z]/, val => val.toUpperCase()) }), actions
                                     .filter(_action => _action.type === 'action')
-                                    .map(_action => (_jsx(MenuItem, { value: _action.name, onClick: _action.actionFunction, children: _action.i18nKey ? t(_action.i18nKey) : _action.name }, _action.name)))] })] }) }), _jsx(Grid, { item: true, sm: !isHorizontal ? true : 'auto', xs: 12, children: _jsxs(FormControl, { disabled: loading || !actions.some(action => action.type === 'assessment'), fullWidth: true, children: [_jsx(InputLabel, { id: "assess-label", htmlFor: "assess", children: t('hit.details.actions.assessment') }), _jsxs(Select, { labelId: "assess-label", id: "assess", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.assessment'), value: currentAssessment ?? 'no-assessment', MenuProps: {
+                                    .map(_action => (_jsx(MenuItem, { value: _action.name, onClick: _action.actionFunction, children: _action.i18nKey ? t(_action.i18nKey) : _action.name }, _action.name)))] })] }) }), _jsx(Grid, { size: { sm: !isHorizontal ? 'grow' : 'auto', xs: 12 }, children: _jsxs(FormControl, { disabled: loading || !actions.some(action => action.type === 'assessment'), fullWidth: true, children: [_jsx(InputLabel, { id: "assess-label", htmlFor: "assess", children: t('hit.details.actions.assessment') }), _jsxs(Select, { labelId: "assess-label", id: "assess", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.assessment'), value: currentAssessment ?? 'no-assessment', MenuProps: {
                                 anchorOrigin: { horizontal: 'left', vertical: 'bottom' },
                                 transformOrigin: { horizontal: 'left', vertical: 'top' }
                             }, children: [_jsx(MenuItem, { value: "no-assessment", sx: { display: 'none' }, children: t('hit.details.actions.assessment.noassessment') }), actions
@@ -21,7 +21,7 @@ const DropdownActions = ({ actions, currentAssessment, currentStatus, currentVot
                                     .map(a => (_jsx(MenuItem, { value: a.name, onClick: a.actionFunction, children: _jsxs(Stack, { direction: "column", children: [_jsx("span", { children: a.name
                                                     .split(/[ -]/)
                                                     .map(part => capitalize(part))
-                                                    .join(' ') }), _jsx(Typography, { variant: "caption", color: "text.secondary", maxWidth: "250px", sx: { whiteSpace: 'wrap' }, children: t(`hit.details.asessments.${a.name}.description`) })] }) }, a.name)))] })] }) }), _jsx(Grid, { item: true, sm: !isHorizontal ? true : 'auto', xs: 12, children: _jsxs(FormControl, { disabled: loading || !actions.some(action => action.type === 'vote'), fullWidth: true, children: [_jsx(InputLabel, { id: "vote-label", htmlFor: "vote", children: t('hit.details.actions.vote') }), _jsxs(Select, { labelId: "vote-label", id: "vote", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.vote'), value: currentVote || 'no-vote', children: [_jsx(MenuItem, { value: "no-vote", sx: { display: 'none' }, children: t('hit.details.actions.vote.novote') }), actions
+                                                    .join(' ') }), _jsx(Typography, { variant: "caption", color: "text.secondary", maxWidth: "250px", sx: { whiteSpace: 'wrap' }, children: t(`hit.details.asessments.${a.name}.description`) })] }) }, a.name)))] })] }) }), _jsx(Grid, { size: { sm: !isHorizontal ? 'grow' : 'auto', xs: 12 }, children: _jsxs(FormControl, { disabled: loading || !actions.some(action => action.type === 'vote'), fullWidth: true, children: [_jsx(InputLabel, { id: "vote-label", htmlFor: "vote", children: t('hit.details.actions.vote') }), _jsxs(Select, { labelId: "vote-label", id: "vote", size: isHorizontal ? 'small' : 'medium', label: t('hit.details.actions.vote'), value: currentVote || 'no-vote', children: [_jsx(MenuItem, { value: "no-vote", sx: { display: 'none' }, children: t('hit.details.actions.vote.novote') }), actions
                                     .filter(action => action.type === 'vote')
                                     .map(action => (_jsx(MenuItem, { value: action.name.toLowerCase(), onClick: action.actionFunction, children: action.i18nKey ? t(action.i18nKey) : action.name }, action.name)))] })] }) })] }));
 };

package/components/elements/hit/aggregate/HitGraph.js

@@ -44,7 +44,7 @@ const HitGraph = () => {
     const error = useContextSelector(RecordSearchContext, ctx => ctx.error);
     const response = useContextSelector(RecordSearchContext, ctx => ctx.response);
     const getFilters = useContextSelector(RecordSearchContext, ctx => ctx.getFilters);
-    const chartRef = useRef();
+    const chartRef = useRef(undefined);
     const [loading, setLoading] = useState(false);
     const [filterField, setFilterField] = useState(FILTER_FIELDS[0]);
     const [data, setData] = useState([]);
@@ -61,10 +61,16 @@ const HitGraph = () => {
             if (escalationFilter) {
                 filters.push(`howler.escalation:${escalationFilter}`);
             }
-            const total = (await dispatchApi(api.search.count.hit.post({
-                query,
+            const countResult = await dispatchApi(api.search.count.hit.post({
+                query: query ?? DEFAULT_QUERY,
                 filters
-            }))).count;
+            }));
+            if (!countResult) {
+                setData([]);
+                setDisabled(false);
+                return;
+            }
+            const total = countResult.count;
             if (total > MAX_QUERY_SIZE) {
                 setDisabled(true);
                 setSearchTotal(total);
@@ -73,7 +79,7 @@ const HitGraph = () => {
             else {
                 setDisabled(false);
             }
-            const _data = await dispatchApi(api.search.grouped.hit.post(filterField, {
+            const groupedResult = await dispatchApi(api.search.grouped.hit.post(filterField, {
                 query: query || DEFAULT_QUERY,
                 fl: 'event.created,howler.assessment,howler.analytic,howler.detection,howler.outline.threat,howler.outline.target,howler.outline.summary,howler.id',
                 // We want a generally random sample across all date ranges, so we use hash.
@@ -84,10 +90,15 @@ const HitGraph = () => {
                 rows: override ? OVERRIDE_ROWS : MAX_ROWS,
                 filters
             }));
-            if (_data.total > MAX_ROWS && !override) {
+            if (!groupedResult) {
+                setData([]);
+                setShowWarning(false);
+                return;
+            }
+            if (groupedResult.total > MAX_ROWS && !override) {
                 setShowWarning(true);
             }
-            const processed = _data.items.map(category => {
+            const processed = groupedResult.items.map(category => {
                 const label = capitalize(category.value ?? 'None');
                 return {
                     label: `${label} (${category.total})`,
@@ -109,7 +120,7 @@ const HitGraph = () => {
         }
     }, [dispatchApi, escalationFilter, filterField, getFilters, override, query]);
     useEffect(() => {
-        if ((!query && views?.length < 1) || error || !response) {
+        if ((!query && (views?.length ?? 0) < 1) || error || !response) {
             return;
         }
         void performQuery();
@@ -144,7 +155,12 @@ const HitGraph = () => {
                     }
                 }
             },
-            onHover: (event, chartElement) => (event.native.target.style.cursor = chartElement[0] ? 'pointer' : 'default'),
+            onHover: (event, chartElement) => {
+                const target = event.native?.target;
+                if (target instanceof HTMLElement) {
+                    target.style.cursor = chartElement[0] ? 'pointer' : 'default';
+                }
+            },
             interaction: {
                 mode: 'nearest'
             },
@@ -178,7 +194,8 @@ const HitGraph = () => {
                     },
                     ticks: {
                         callback: (value) => {
-                            const [hour, minute] = [Math.floor(value), Math.floor((value - Math.floor(value)) * 60)];
+                            const numValue = typeof value === 'number' ? value : parseFloat(value);
+                            const [hour, minute] = [Math.floor(numValue), Math.floor((numValue - Math.floor(numValue)) * 60)];
                             return dayjs().hour(hour).minute(minute).format('HH:mm');
                         }
                     }
@@ -213,7 +230,7 @@ const HitGraph = () => {
     }, [selectedHits]);
     return (_jsxs(Stack, { sx: { position: 'relative' }, spacing: 1, children: [_jsx(Scatter, { ref: chartRef, options: options, data: {
                     datasets: data
-                } }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { pt: 2 }, children: [_jsx(Autocomplete, { sx: { flex: 1 }, options: FILTER_FIELDS, renderInput: params => _jsx(TextField, { ...params, label: t('hit.summary.filter.field'), size: "small" }), value: filterField, onChange: (__, option) => setFilterField(option) }), _jsx(Autocomplete, { sx: { flex: 1 }, options: config.lookups['howler.escalation'], renderInput: params => _jsx(TextField, { ...params, label: t('hit.summary.filter.escalation'), size: "small" }), value: escalationFilter, onChange: (__, option) => setEscalationFilter(option) })] }), showWarning && (_jsxs(Alert, { severity: "warning", variant: "outlined", action: _jsx(Button, { variant: "outlined", color: "warning", onClick: () => {
+                } }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { pt: 2 }, children: [_jsx(Autocomplete, { sx: { flex: 1 }, options: FILTER_FIELDS, renderInput: params => _jsx(TextField, { ...params, label: t('hit.summary.filter.field'), size: "small" }), value: filterField, onChange: (__, option) => setFilterField(option) }), _jsx(Autocomplete, { sx: { flex: 1 }, options: config.lookups?.['howler.escalation'] ?? [], renderInput: params => _jsx(TextField, { ...params, label: t('hit.summary.filter.escalation'), size: "small" }), value: escalationFilter, onChange: (__, option) => setEscalationFilter(option) })] }), showWarning && (_jsxs(Alert, { severity: "warning", variant: "outlined", action: _jsx(Button, { variant: "outlined", color: "warning", onClick: () => {
                         setOverride(true);
                         setShowWarning(false);
                     }, children: t('hit.summary.render.limit.override') }), children: [_jsx(AlertTitle, { children: t('hit.summary.render.limit', { number: MAX_ROWS }) }), t(`hit.summary.render.limit.description`, { number: MAX_ROWS, max: OVERRIDE_ROWS })] })), disabled && (_jsx(Box, { sx: {

package/components/elements/hit/elements/AnalyticLink.js

@@ -3,7 +3,7 @@ import { Link as LinkIcon } from '@mui/icons-material';
 import { IconButton, Stack, Typography } from '@mui/material';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 const AnalyticLink = ({ hit, lazy = false, compressed, alignSelf = 'start' }) => {
     const { getMatchingAnalytic } = useMatchers(lazy);
     const [analyticId, setAnalyticId] = useState();
@@ -18,6 +18,6 @@ const AnalyticLink = ({ hit, lazy = false, compressed, alignSelf = 'start' }) =>
                     e.stopPropagation();
                 }, onClick: e => {
                     e.stopPropagation();
-                }, disabled: !analyticId, to: `/analytics/${analyticId}`, target: "_blank", rel: "noopener noreferrer", children: _jsx(LinkIcon, { fontSize: "small" }) }), _jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed && 'bold', sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [hit.howler.analytic, hit.howler.detection && ' > ', hit.howler.detection] })] }));
+                }, disabled: !analyticId, to: `/analytics/${analyticId}`, target: "_blank", rel: "noopener noreferrer", children: _jsx(LinkIcon, { fontSize: "small" }) }), _jsxs(Typography, { variant: compressed ? 'body1' : 'h6', fontWeight: compressed ? 'bold' : undefined, sx: { alignSelf, '& a': { color: 'text.primary' } }, children: [hit.howler.analytic, hit.howler.detection && ' > ', hit.howler.detection] })] }));
 };
 export default AnalyticLink;

package/components/elements/hit/elements/AnalyticLink.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter } from 'react-router';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import AnalyticLink from './AnalyticLink';
 const getMatchingAnalytic = vi.hoisted(() => vi.fn());

package/components/elements/hit/elements/Assigned.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppUser } from '@tui/core';
 import { avatarClasses, AvatarGroup, Chip, Divider, Stack } from '@mui/material';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
 import HowlerAvatar from '@cccsaurora/howler-ui/components/elements/display/HowlerAvatar';
 import { uniq } from 'lodash-es';

package/components/elements/hit/elements/Assigned.test.js

@@ -6,7 +6,7 @@ import { describe, expect, it, vi } from 'vitest';
 // ---------------------------------------------------------------------------
 // Hoisted mocks
 // ---------------------------------------------------------------------------
-vi.mock('commons/components/app/hooks', () => ({
+vi.mock('@tui/core', () => ({
     useAppUser: () => ({ user: { username: 'current-user' } })
 }));
 vi.mock('components/elements/display/HowlerAvatar', () => ({

package/components/elements/hit/elements/EscalationChip.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Chip, Tooltip } from '@mui/material';
-import { ESCALATION_COLORS } from '@cccsaurora/howler-ui/utils/constants';
+import { getEscalationColor } from '@cccsaurora/howler-ui/utils/utils';
 import { HitLayout } from '../HitLayout';
 const EscalationChip = ({ hit, layout, hideLabel = false }) => {
     const label = ['evidence', 'miss'].includes(hit.howler.escalation) ? hit.howler.assessment : hit.howler.escalation;
-    const component = (_jsx(Chip, { sx: [{ width: 'fit-content', display: 'inline-flex' }, HitLayout.DENSE && { minWidth: '20px' }], label: hideLabel ? ' ' : label, size: layout !== HitLayout.COMFY ? 'small' : 'medium', color: ESCALATION_COLORS[hit.howler.escalation] }));
+    const component = (_jsx(Chip, { sx: [{ width: 'fit-content', display: 'inline-flex' }, HitLayout.DENSE && { minWidth: '20px' }], label: hideLabel ? ' ' : label, size: layout !== HitLayout.COMFY ? 'small' : 'medium', color: getEscalationColor(hit.howler.escalation) }));
     return hideLabel ? _jsx(Tooltip, { title: label, children: component }) : component;
 };
 export default EscalationChip;

package/components/elements/hit/elements/HitTimestamp.js

@@ -14,11 +14,11 @@ const TIMESTAMP_MESSAGES = {
 const HitTimestamp = ({ hit, layout }) => {
     const { t } = useTranslation();
     const { config } = useContext(ApiConfigContext);
-    const threshold = useMemo(() => dayjs().subtract(config.configuration.system.retention?.limit_amount ?? 350, config.configuration.system.retention?.limit_unit ?? 'days'), [config.configuration.system.retention?.limit_amount, config.configuration.system.retention?.limit_unit]);
+    const threshold = useMemo(() => dayjs().subtract(config.configuration?.system.retention?.limit_amount ?? 350, config.configuration?.system.retention?.limit_unit ?? 'days'), [config.configuration]);
     const timestamp = useMemo(() => {
         const validFieldValues = [hit.howler?.expiry, hit.event?.created, hit.timestamp];
         const earliestDate = validFieldValues
-            .filter(entry => !!entry)
+            .filter((entry) => !!entry)
             .reduce((earliest, current) => {
             return dayjs(earliest).isBefore(current) ? earliest : current;
         });

package/components/elements/hit/grid/AddColumnModal.js

@@ -23,11 +23,11 @@ const AddColumnModal = ({ addColumn, columns }) => {
             setSuggestions(uniq((await Promise.all((response?.items ?? []).filter(isHit).map(async (_hit) => (await getMatchingTemplate(_hit))?.keys ?? []))).flat()));
         })();
     }, [getMatchingTemplate, response?.items]);
-    return (_jsx(ChipPopper, { icon: _jsx(TableChart, {}), deleteIcon: _jsx(Settings, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small' } }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { sx: { flex: 1 }, size: "small", options: options, value: columnToAdd, renderInput: params => _jsx(TextField, { fullWidth: true, placeholder: t('hit.fields'), ...params }), onChange: (_ev, value) => setColumnToAdd(value) }), _jsx(IconButton, { disabled: !columnToAdd, onClick: () => {
+    return (_jsx(ChipPopper, { icon: _jsx(TableChart, {}), deleteIcon: _jsx(Settings, {}), toggleOnDelete: true, slotProps: { chip: { size: 'small' } }, children: _jsxs(Stack, { spacing: 1, p: 1, width: "500px", children: [_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Autocomplete, { sx: { flex: 1 }, size: "small", options: options, value: columnToAdd, renderInput: params => _jsx(TextField, { ...params, fullWidth: true, placeholder: t('hit.fields') }), onChange: (_ev, value) => setColumnToAdd(value ?? null) }), _jsx(IconButton, { disabled: !columnToAdd, onClick: () => {
                                 addColumn(columnToAdd);
                                 setColumnToAdd(null);
                             }, children: _jsx(Add, {}) })] }), _jsx(Divider, { orientation: "horizontal" }), _jsx(Grid, { container: true, spacing: 1, children: sortBy(suggestions.map(key => ({ key, used: columns.includes(key) })), 'used').map(({ key, used }) => {
-                        return (_jsx(Grid, { item: true, children: _jsx(Chip, { size: "small", variant: "outlined", color: used ? 'success' : 'default', label: key, icon: used ? _jsx(Check, {}) : _jsx(Add, {}), onClick: () => addColumn(key), disabled: used }) }, key));
+                        return (_jsx(Grid, { children: _jsx(Chip, { size: "small", variant: "outlined", color: used ? 'success' : 'default', label: key, icon: used ? _jsx(Check, {}) : _jsx(Add, {}), onClick: () => addColumn(key), disabled: used }) }, key));
                     }) })] }) }));
 };
 export default memo(AddColumnModal);

package/components/elements/hit/grid/ColumnHeader.js

@@ -15,7 +15,7 @@ const ColumnHeader = ({ col, width, colSource, setColumns, onMouseDown }) => {
             borderRightColor: 'divider',
             py: 0.5,
             position: 'relative'
-        }, style: { transform: CSS.Translate.toString(transform), transition }, children: _jsxs(Stack, { className: `col-${col.replaceAll('.', '-')}`, direction: "row", spacing: 1, alignItems: "center", sx: [{ minWidth: '220px' }, width ? { width, maxWidth: width } : { maxWidth: '300px' }], children: [_jsx(Tooltip, { title: config.indexes.hit[col].description, children: _jsx("span", { children: col }) }), colSource?.length > 1 && (_jsx(Tooltip, { title: colSource.join(', '), children: _jsx(JoinFull, { fontSize: "small" }) })), _jsx(FlexOne, {}), _jsx(IconButton, { size: "small", sx: { fontSize: '1rem' }, onClick: () => setColumns(_columns => _columns.filter(_col => _col !== col)), children: _jsx(Remove, { fontSize: "inherit" }) }), _jsx(DragIndicator, { fontSize: "small", sx: { cursor: 'grab' }, ...attributes, ...listeners }), _jsx(Box, { sx: {
+        }, style: { transform: CSS.Translate.toString(transform), transition }, children: _jsxs(Stack, { className: `col-${col.replaceAll('.', '-')}`, direction: "row", spacing: 1, alignItems: "center", sx: [{ minWidth: '220px' }, width ? { width, maxWidth: width } : { maxWidth: '300px' }], children: [_jsx(Tooltip, { title: config.indexes?.hit[col]?.description, children: _jsx("span", { children: col }) }), (colSource?.length ?? 0) > 1 && (_jsx(Tooltip, { title: colSource.join(', '), children: _jsx(JoinFull, { fontSize: "small" }) })), _jsx(FlexOne, {}), _jsx(IconButton, { size: "small", sx: { fontSize: '1rem' }, onClick: () => setColumns(_columns => _columns.filter(_col => _col !== col)), children: _jsx(Remove, { fontSize: "inherit" }) }), _jsx(DragIndicator, { fontSize: "small", sx: { cursor: 'grab' }, ...attributes, ...listeners }), _jsx(Box, { sx: {
                         position: 'absolute',
                         top: theme.spacing(0.75),
                         bottom: theme.spacing(0.75),

package/components/elements/hit/grid/RecordRow.js

@@ -11,7 +11,7 @@ import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayo
 import { get } from 'lodash-es';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import EnhancedCell from './EnhancedCell';

package/components/elements/hit/grid/RecordTable.d.ts

@@ -1,3 +1,4 @@
+import type { RecordContextMenuProps } from '@cccsaurora/howler-ui/components/elements/record/RecordContextMenu';
 import type { Event } from '@cccsaurora/howler-ui/models/entities/generated/Event';
 import type { Hit } from '@cccsaurora/howler-ui/models/entities/generated/Hit';
 import type { WithMetadata } from '@cccsaurora/howler-ui/models/WithMetadata';
@@ -6,8 +7,8 @@ declare const RecordTable: ({ query, items, refreshItems, ContextMenu, contextMe
     query: string;
     items?: WithMetadata<Hit | Event>[];
     refreshItems?: (query: string, append?: boolean) => void;
-    ContextMenu?: React.FC<PropsWithChildren<object>>;
-    contextMenuProps?: object;
+    ContextMenu?: React.FC<PropsWithChildren<RecordContextMenuProps>>;
+    contextMenuProps?: RecordContextMenuProps;
     onItemClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, record: Hit | Event) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default RecordTable;

package/components/elements/hit/grid/RecordTable.js

@@ -17,7 +17,7 @@ const RecordTable = ({ query, items, refreshItems, ContextMenu, contextMenuProps
     const [collapseMainColumn, setCollapseMainColumn] = useMyLocalStorageItem(StorageKey.GRID_COLLAPSE_COLUMN, false);
     const [analyticIds, setAnalyticIds] = useState({});
     const { columns, columnWidths, columnSources, setColumnWidth, setColumns, isReady } = useContext(GridColumnsContext);
-    const resizingCol = useRef();
+    const resizingCol = useRef(undefined);
     useEffect(() => {
         items?.forEach(record => {
             if (!isHit(record) || analyticIds[record.howler.analytic]) {
@@ -47,11 +47,11 @@ const RecordTable = ({ query, items, refreshItems, ContextMenu, contextMenuProps
         if (isReady) {
             setColumnWidth(col, Math.round(width));
         }
-        element.style.width = null;
-        element.style.maxWidth = null;
+        element.style.width = '';
+        element.style.maxWidth = '';
         document.querySelectorAll(`.col-${col.replaceAll('.', '-')}`).forEach(el => {
-            el.style.maxWidth = null;
-            el.style.width = null;
+            el.style.maxWidth = '';
+            el.style.width = '';
         });
         window.removeEventListener('mousemove', onMouseMove);
         window.removeEventListener('mouseup', onMouseUp);
@@ -79,6 +79,6 @@ const RecordTable = ({ query, items, refreshItems, ContextMenu, contextMenuProps
     return (_jsxs(Table, { sx: { '& td,th': { px: 1, py: 0.25, whiteSpace: 'nowrap' } }, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { sx: {
                                 borderRight: 'thin solid',
                                 borderRightColor: 'divider'
-                            }, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], colSource: columnSources[col], onMouseDown: onMouseDown, setColumns: isReady ? setColumns : () => null }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), ContextMenu ? (_jsx(ContextMenu, { ...contextMenuProps, children: tableContent })) : (_jsx(TableBody, { children: tableContent }))] }));
+                            }, children: _jsx(IconButton, { onClick: () => setCollapseMainColumn(!collapseMainColumn), children: collapseMainColumn ? (_jsx(FormatIndentIncrease, { fontSize: "small" })) : (_jsx(FormatIndentDecrease, { fontSize: "small" })) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: columns, children: columns.map(col => (_jsx(ColumnHeader, { col: col, width: columnWidths[col], colSource: columnSources[col], onMouseDown: onMouseDown, setColumns: isReady ? setColumns : () => null }, col))) }) }), _jsx(TableCell, { sx: { width: '100%' } })] }) }), ContextMenu && contextMenuProps ? (_jsx(ContextMenu, { ...contextMenuProps, children: tableContent })) : (_jsx(TableBody, { children: tableContent }))] }));
 };
 export default RecordTable;

package/components/elements/hit/related/PivotLink.js

@@ -41,7 +41,7 @@ const PivotLink = ({ pivot, hit, compact = false, dossier, resolvedUrl }) => {
             handlebars.registerHelper(helper.keyword, (...args) => {
                 // eslint-disable-next-line no-console
                 console.debug(`Running helper ${helper.keyword}`);
-                return helper.callback(...args);
+                return helper.callback?.(...args);
             });
         });
         try {
@@ -54,7 +54,7 @@ const PivotLink = ({ pivot, hit, compact = false, dossier, resolvedUrl }) => {
         }
     }, [flatHit, pivot, handlebars, helpers]);
     if (href) {
-        return (_jsx(RelatedLink, { title: pivot.label[i18n.language], href: href, compact: compact, icon: pivot.icon, target: "_blank", rel: "noopener noreferrer", tooltip: _jsx(PivotTooltip, { dossier: dossier, resolvedUrl: resolvedUrl }) }));
+        return (_jsx(RelatedLink, { title: pivot.label?.[i18n.language] ?? '', href: href, compact: compact, icon: pivot.icon, target: "_blank", rel: "noopener noreferrer", tooltip: _jsx(PivotTooltip, { dossier: dossier, resolvedUrl: resolvedUrl }) }));
     }
     // Hide a relatively useless console error, we'll show a UI component instead
     // eslint-disable-next-line no-console

package/components/elements/hit/related/RelatedIcon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
 import Avatar from '@mui/material/Avatar';
-import { useAppTheme } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { useAppTheme } from '@tui/core';
 import { ApiConfigContext } from '@cccsaurora/howler-ui/components/app/providers/ApiConfigProvider';
 import { useContext } from 'react';
 const RelatedIcon = ({ icon, title, href, compact = false }) => {
@@ -11,7 +11,7 @@ const RelatedIcon = ({ icon, title, href, compact = false }) => {
         return null;
     }
     let avatarImage = null;
-    const app = config.configuration.ui.apps.find(a => a.name.toLowerCase() === icon?.toLowerCase());
+    const app = config.configuration?.ui.apps.find(a => a.name.toLowerCase() === icon?.toLowerCase());
     if (app) {
         // use the image link for the configured related application instead
         avatarImage = app[`img_${isDark ? 'd' : 'l'}`];

package/components/elements/hit/related/RelatedLink.js

@@ -3,7 +3,7 @@ import { Stack, Tooltip, Typography } from '@mui/material';
 import HowlerCard from '@cccsaurora/howler-ui/components/elements/display/HowlerCard';
 import RelatedLinkTooltip from '@cccsaurora/howler-ui/components/elements/hit/RelatedLinkTooltip';
 import React, {} from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import RelatedIcon from './RelatedIcon';
 const RelatedLink = ({ icon, title, href, target, rel, compact = false, tooltip, children }) => {
     const safeTitle = title ?? href ?? '';

package/components/elements/hit/related/RelatedRecords.js

@@ -8,7 +8,7 @@ import useRelatedRecords from '@cccsaurora/howler-ui/components/hooks/useRelated
 import { identity, uniq } from 'lodash-es';
 import { memo, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { isCase, isEvent, isHit } from '@cccsaurora/howler-ui/utils/typeUtils';
 import HitPreview from '../HitPreview';
 const RecordLink = ({ to, ariaLabel, children }) => {

package/components/elements/membership/Members.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import type { Ownership } from './types';
+declare const Members: FC<{
+    item: Ownership;
+}>;
+export default Members;

package/components/elements/membership/Members.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AvatarGroup } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import HowlerAvatar from '../display/HowlerAvatar';
+import { getAllMembers } from './utils';
+const Members = ({ item }) => {
+    const { t } = useTranslation();
+    return (_jsx(AvatarGroup, { max: 5, slotProps: {
+            surplus: {
+                sx: { height: 32, width: 32, fontSize: '12px' }
+            }
+        }, children: getAllMembers(item).map(([member, privilege]) => (_jsx(HowlerAvatar, { userId: member, label: t(`membership.privilege.${privilege}`) + ' - ' + member, sx: { height: 32, width: 32 } }, member))) }));
+};
+export default Members;

package/components/elements/membership/MembershipManagement.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonProps } from '@mui/material';
+import type { Ownership } from './types';
+export interface MembershipManagementProps<T extends Ownership> {
+    size?: ButtonProps['size'];
+    type: 'action' | 'view' | 'dossier';
+    entity?: T;
+    onChange: (entity: T) => void;
+}
+export declare const MembershipManagement: <T extends Ownership>({ type, entity, onChange, size }: MembershipManagementProps<T>) => import("react").JSX.Element | null;

package/components/elements/membership/MembershipManagement.js

@@ -0,0 +1,119 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Delete, PersonAdd } from '@mui/icons-material';
+import { Box, Button, Dialog, DialogContent, DialogTitle, Divider, IconButton, List, ListItem, ListItemText, Stack, TextField, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { useAppUser } from '@tui/core';
+import api from '@cccsaurora/howler-ui/api';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
+import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
+import { isEqual } from 'lodash-es';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router';
+import CustomButton from '../addons/buttons/CustomButton';
+import FlexOne from '../addons/layout/FlexOne';
+import HowlerAvatar from '../display/HowlerAvatar';
+import UserList from '../UserList';
+import { getAllMembers } from './utils';
+export const MembershipManagement = ({ type, entity, onChange, size }) => {
+    const params = useParams();
+    const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
+    const { user } = useAppUser();
+    const { showSuccessMessage, showWarningMessage, showErrorMessage } = useMySnackbar();
+    const [selectedUserIds, setSelectedUserIds] = useState([]);
+    const [memberQuery, setMemberQuery] = useState('');
+    const [privilege, setPrivilege] = useState('members');
+    const [open, setOpen] = useState(false);
+    const canManageMembership = entity &&
+        user &&
+        (entity.owner === user.username || entity.admins?.includes(user.username) || !!user.roles?.includes('admin'));
+    const members = getAllMembers(entity);
+    const users = useMyUserList(members.map(([member]) => member));
+    const handleAddMember = useCallback(async () => {
+        if (selectedUserIds.length === 0) {
+            showWarningMessage(t('membership.message.warning'));
+            return;
+        }
+        try {
+            const updatedEntity = (await dispatchApi(api[type].permission.put(params.id, {
+                privilege,
+                user_ids: selectedUserIds
+            })));
+            if (!updatedEntity) {
+                throw new Error('Updated Entity was not returned.');
+            }
+            showSuccessMessage(t('membership.message.success'));
+            onChange(updatedEntity);
+            setSelectedUserIds([]);
+            setMemberQuery('');
+        }
+        catch {
+            showErrorMessage(t('membership.message.error'));
+        }
+    }, [
+        dispatchApi,
+        params.id,
+        selectedUserIds,
+        privilege,
+        t,
+        showSuccessMessage,
+        showErrorMessage,
+        showWarningMessage,
+        type,
+        onChange
+    ]);
+    // Keep the targeted privilege explicit so we remove the intended permission entry.
+    const handleRemoveMember = useCallback(async (user_id, targetPrivilege) => {
+        try {
+            const updatedEntity = (await dispatchApi(api[type].permission.delete(params.id, {
+                privilege: targetPrivilege,
+                user_ids: [user_id]
+            }), {
+                throwError: false
+            }));
+            if (!updatedEntity) {
+                throw new Error('Updated Entity was not returned.');
+            }
+            showSuccessMessage(t('membership.message.success'));
+            onChange(updatedEntity);
+        }
+        catch {
+            showErrorMessage(t('membership.message.error'));
+        }
+    }, [dispatchApi, params.id, type, onChange, showErrorMessage, t, showSuccessMessage]);
+    useEffect(() => {
+        if (open) {
+            // Reset modal state each time it opens to avoid leaking stale UI state.
+            setSelectedUserIds([]);
+            setMemberQuery('');
+            setPrivilege('members');
+        }
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const canAssignOwner = !!user && (user.roles?.includes('admin') || members.some(member => isEqual(member, [user.username, 'owner'])));
+    const availablePrivileges = canAssignOwner ? ['owner', 'admins', 'members'] : ['admins', 'members'];
+    const getPrivilegeLabel = useCallback((privilege) => {
+        return t(`membership.privilege.${privilege}`);
+    }, [t]);
+    const filteredMembers = useMemo(() => members.filter(([member, privilege]) => {
+        const normalizedQuery = memberQuery.trim().toLowerCase();
+        if (!normalizedQuery) {
+            return true;
+        }
+        return (member.toLowerCase().includes(normalizedQuery) ||
+            privilege.toLowerCase().includes(normalizedQuery) ||
+            getPrivilegeLabel(privilege).toLowerCase().includes(normalizedQuery));
+    }), [members, getPrivilegeLabel, memberQuery]);
+    if (!canManageMembership) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(CustomButton, { sx: { flexShrink: 0 }, variant: "outlined", startIcon: _jsx(PersonAdd, {}), onClick: () => setOpen(true), size: size, children: t('membership.manage') }), _jsxs(Dialog, { open: open, onClose: () => setOpen(false), slotProps: { paper: { sx: { maxWidth: '50vw' } } }, children: [_jsx(DialogTitle, { children: t('membership.manage') }), _jsx(DialogContent, { sx: { minHeight: '300px', maxWidth: '80vw', display: 'flex', flexDirection: 'column' }, children: _jsxs(Stack, { direction: "row", divider: _jsx(Divider, { orientation: "vertical", flexItem: true }), spacing: 1, flex: 1, alignItems: "stretch", pt: 0.5, children: [_jsxs(Stack, { spacing: 1, children: [_jsx(TextField, { fullWidth: true, size: "small", label: t('search'), value: memberQuery, onChange: event => setMemberQuery(event.target.value), sx: { minWidth: '300px' } }), _jsx(List, { children: filteredMembers.map(([m, privilege]) => (_jsx(ListItem, { children: _jsxs(Stack, { direction: "row", sx: { alignItems: 'center', width: '100%' }, spacing: 1, children: [_jsx(HowlerAvatar, { userId: m || 'Unknown' }), _jsx(ListItemText, { primary: users[m]?.name || m, secondary: users[m]?.email
+                                                                ? `${getPrivilegeLabel(privilege)} - ${users[m].email}`
+                                                                : getPrivilegeLabel(privilege) }), _jsx(FlexOne, {}), privilege !== 'owner' && (_jsx(IconButton, { disabled: !params.id, onClick: () => handleRemoveMember(m, privilege), children: _jsx(Delete, { color: "error" }) }))] }) }, `${m}-${privilege}`))) })] }), _jsxs(Stack, { spacing: 1, children: [_jsx(ToggleButtonGroup, { exclusive: true, value: privilege, onChange: (_e, _privilege) => setPrivilege(_privilege), children: availablePrivileges.map(k => (_jsx(ToggleButton, { value: k, children: getPrivilegeLabel(k) }, k))) }), _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: _jsx(UserList, { variant: "list", multiple: true, i18nLabel: t('page.login.username'), userIds: selectedUserIds, onChange: setSelectedUserIds, except: members
+                                                    .filter(([_, _privilege]) => _privilege === 'owner' || privilege === _privilege)
+                                                    .map(([member]) => member) }) }), _jsx(Button, { onClick: handleAddMember, sx: { mt: 3 }, variant: "contained", fullWidth: true, disabled: !params.id ||
+                                                selectedUserIds.length === 0 ||
+                                                !privilege ||
+                                                (privilege === 'owner' && selectedUserIds.length > 1), children: t('add') })] })] }) })] })] }));
+};