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

package/components/app/providers/ViewProvider.d.ts

@@ -1,8 +1,8 @@
 import type { View } from '@cccsaurora/howler-ui/models/entities/generated/View';
 import { type FC, type PropsWithChildren } from 'react';
 export interface ViewContextType {
-    defaultView: string;
-    setDefaultView: (viewId: string) => void;
+    defaultView?: string;
+    setDefaultView: (viewId?: string) => void;
     views: {
         [viewId: string]: View;
     };

package/components/app/providers/ViewProvider.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppUser } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { has, omit, uniq } from 'lodash-es';
 import { useCallback, useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { createContext, useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 export const ViewContext = createContext(null);
@@ -26,7 +26,7 @@ const ViewProvider = ({ children }) => {
         }
         const missingIds = ids.filter(_id => !!_id && !has(views, _id));
         if (missingIds.length < 1) {
-            return ids.map(id => views[id]);
+            return ids.map(id => views[id]).filter(view => !!view);
         }
         try {
             const response = await dispatchApi(api.search.view.post({
@@ -34,13 +34,15 @@ const ViewProvider = ({ children }) => {
                 rows: missingIds.length,
                 sort: 'title asc'
             }));
+            if (!response) {
+                return [];
+            }
             const newViews = Object.fromEntries(response.items.map(_view => [_view.view_id, _view]));
             setViews(_views => ({
                 ..._views,
-                ...Object.fromEntries(missingIds.map(_view_id => [_view_id, null])),
                 ...newViews
             }));
-            return ids.map(id => views[id] ?? newViews[id]);
+            return ids.map(id => views[id] ?? newViews[id]).filter(view => !!view);
         }
         catch (e) {
             // eslint-disable-next-line no-console
@@ -68,7 +70,10 @@ const ViewProvider = ({ children }) => {
         const missing = [];
         currentViews.forEach(_view => {
             if (has(views, _view)) {
-                results.push(views[_view]);
+                const view = views[_view];
+                if (view) {
+                    results.push(view);
+                }
             }
             else if (!lazy) {
                 missing.push(_view);
@@ -78,6 +83,9 @@ const ViewProvider = ({ children }) => {
     }, [fetchViews, searchParams, views]);
     const editView = useCallback(async (id, partialView) => {
         const result = await dispatchApi(api.view.put(id, partialView));
+        if (!result) {
+            throw new Error(`Unable to update view ${id}.`);
+        }
         setViews(_views => ({
             ..._views,
             [id]: { ..._views[id], ...partialView }
@@ -88,29 +96,31 @@ const ViewProvider = ({ children }) => {
         await dispatchApi(api.view.favourite.post(id));
         appUser.setUser({
             ...appUser.user,
-            favourite_views: [...appUser.user.favourite_views, id]
+            favourite_views: [...(appUser.user.favourite_views ?? []), id]
         });
     }, [appUser, dispatchApi]);
     const addView = useCallback(async (view) => {
         const newView = await dispatchApi(api.view.post(view));
+        if (!newView) {
+            throw new Error('Unable to create view.');
+        }
         setViews(_views => ({ ..._views, [newView.view_id]: newView }));
-        void addFavourite(newView.view_id);
+        await addFavourite(newView.view_id);
         return newView;
     }, [addFavourite, dispatchApi]);
     const removeFavourite = useCallback(async (id) => {
         await dispatchApi(api.view.favourite.del(id));
         appUser.setUser({
             ...appUser.user,
-            favourite_views: appUser.user.favourite_views.filter(v => v !== id)
+            favourite_views: (appUser.user.favourite_views ?? []).filter(v => v !== id)
         });
     }, [appUser, dispatchApi]);
     const removeView = useCallback(async (id) => {
-        if (appUser.user?.favourite_views.includes(id)) {
+        if (appUser.user?.favourite_views?.includes(id)) {
             await removeFavourite(id);
         }
-        const result = await dispatchApi(api.view.del(id));
+        await dispatchApi(api.view.del(id));
         setViews(_views => omit(_views, id));
-        return result;
     }, [appUser.user?.favourite_views, dispatchApi, removeFavourite]);
     return (_jsx(ViewContext.Provider, { value: {
             views,

package/components/app/providers/ViewProvider.test.js

@@ -11,10 +11,10 @@ let mockUser = {
 };
 setupReactRouterMock();
 const mockLocalStorage = setupLocalStorageMock();
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 vi.mocked(useSearchParams).mockReturnValue([new URLSearchParams('?view=searched_view_id')]);
 vi.mock('api', { spy: true });
-vi.mock('commons/components/app/hooks', () => ({
+vi.mock('@tui/core', () => ({
     useAppUser: () => ({
         user: mockUser,
         setUser: _user => (mockUser = _user)

package/components/app/providers/contextUtils.d.ts

@@ -0,0 +1 @@
+export declare const missingContext: (contextName: string) => never;

package/components/app/providers/contextUtils.js

@@ -0,0 +1,3 @@
+export const missingContext = (contextName) => {
+    throw new Error(`${contextName} must be used within its provider.`);
+};

package/components/elements/Comment.d.ts

@@ -6,7 +6,7 @@ declare const _default: import("react").NamedExoticComponent<{
     comment: HowlerComment | AnalyticComment;
     handleDelete?: () => Promise<void>;
     handleEdit?: (value: string) => Promise<void>;
-    handleReact?: (type: string) => Promise<void>;
+    handleReact?: (type: string | null) => Promise<void>;
     handleQuote?: () => void;
     onClick?: () => void;
     users: {

package/components/elements/Comment.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Celebration, Check, Clear, Delete, Edit, Favorite, FireTruck, FormatQuote, Mood, MoreHoriz, RocketLaunch, ThumbDown, ThumbUp } from '@mui/icons-material';
 import { CardActions, CardContent, Chip, CircularProgress, Collapse, Fade, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Stack, TextField, Tooltip, Typography } from '@mui/material';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { useAppUser } from '@tui/core';
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import useMyUtils from '@cccsaurora/howler-ui/components/hooks/useMyUtils';
 import { memo, useCallback, useMemo, useState } from 'react';
@@ -28,13 +28,13 @@ const Comment = ({ comment, handleDelete, handleEdit, handleQuote, handleReact,
     const [editing, setEditing] = useState(false);
     const [loading, setLoading] = useState(false);
     const [showInteractions, setShowInteractions] = useState(false);
-    const [editValue, setEditValue] = useState(comment.value);
+    const [editValue, setEditValue] = useState(comment.value ?? '');
     const handleOpen = useCallback((event) => setAnchorEl(event.currentTarget), []);
     const handleClose = useCallback(() => setAnchorEl(null), []);
     const onDelete = useCallback(async () => {
         setLoading(true);
         try {
-            await handleDelete();
+            await handleDelete?.();
         }
         finally {
             setLoading(false);
@@ -48,7 +48,7 @@ const Comment = ({ comment, handleDelete, handleEdit, handleQuote, handleReact,
         }
         try {
             setLoading(true);
-            await handleEdit(editValue);
+            await handleEdit?.(editValue);
             setEdited(true);
         }
         finally {
@@ -66,14 +66,14 @@ const Comment = ({ comment, handleDelete, handleEdit, handleQuote, handleReact,
         }
     }, [loading, onEdit]);
     const onQuote = useCallback(() => {
-        handleQuote();
+        handleQuote?.();
         handleClose();
     }, [handleClose, handleQuote]);
     const reactions = useMemo(() => {
         return Object.keys(REACTION_ICONS).map(type => {
             const quantity = Object.values(comment?.reactions ?? {}).filter(r => r === type).length;
             const Icon = REACTION_ICONS[type];
-            return !!quantity || (showInteractions && handleReact) ? (_jsx(Fade, { in: true, children: _jsx(Chip, { size: "small", variant: "outlined", color: comment.reactions?.[user.username] === type ? 'primary' : 'default', icon: _jsx(Icon, {}), onClick: handleReact ? () => handleReact(comment.reactions?.[user.username] !== type ? type : null) : null, sx: [
+            return !!quantity || (showInteractions && handleReact) ? (_jsx(Fade, { in: true, children: _jsx(Chip, { size: "small", variant: "outlined", color: comment.reactions?.[user.username] === type ? 'primary' : 'default', icon: _jsx(Icon, {}), onClick: handleReact ? () => handleReact(comment.reactions?.[user.username] !== type ? type : null) : undefined, sx: [
                         !quantity && {
                             '& svg': { mr: '-14px !important' }
                         }
@@ -82,8 +82,8 @@ const Comment = ({ comment, handleDelete, handleEdit, handleQuote, handleReact,
     }, [comment.reactions, handleReact, showInteractions, user.username]);
     return (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HowlerAvatar, { userId: comment.user }), _jsxs(HowlerCard, { onClick: onClick, onMouseEnter: () => setShowInteractions(true), onMouseLeave: () => setShowInteractions(false), sx: [
                     { p: 2, pb: 0, pt: 1, border: 'thin solid transparent' },
-                    editing && { flex: 1 },
-                    onClick && { '&:hover': { cursor: 'pointer', borderColor: 'primary.main' } }
+                    editing ? { flex: 1 } : {},
+                    onClick ? { '&:hover': { cursor: 'pointer', borderColor: 'primary.main' } } : {}
                 ], children: [_jsxs(CardContent, { sx: { p: 0 }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, children: [_jsx(Typography, { variant: "body1", children: users[comment.user]?.name ?? comment.user }), wasEdited && (_jsx(Typography, { variant: "caption", sx: theme => ({
                                             marginRight: `${theme.spacing(1)} !important`,
                                             color: shiftColor(theme.palette.text.primary, 0.25)
@@ -109,6 +109,8 @@ const Comment = ({ comment, handleDelete, handleEdit, handleQuote, handleReact,
                                     '& > :last-child': {
                                         marginBottom: 0
                                     }
-                                }, children: _jsx(Markdown, { md: comment.value }) })) : (_jsx(TextField, { sx: { mt: 1 }, inputProps: { sx: (theme) => ({ fontSize: theme.typography.body2.fontSize }) }, inputRef: (ref) => setTimeout(() => ref?.current?.focus(), 100), defaultValue: comment.value, onChange: e => setEditValue(e.target.value), onKeyDown: checkForActions, fullWidth: true, multiline: true }))] }), _jsx(CardActions, { sx: { px: 0 }, children: _jsx(Collapse, { in: editing || showInteractions || Object.values(comment?.reactions ?? {}).length > 0, sx: { width: '100%' }, children: _jsxs(Stack, { direction: "row", sx: { width: '100%' }, spacing: 0.5, children: [reactions, _jsx(FlexOne, {}), editing && (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", onClick: () => setEditing(false), disabled: loading, children: _jsx(Clear, { fontSize: "small" }) }), _jsx(IconButton, { size: "small", onClick: onEdit, disabled: loading, children: _jsx(Check, { fontSize: "small" }) })] }))] }) }) })] }, comment.timestamp)] }, comment.id));
+                                }, children: _jsx(Markdown, { md: comment.value ?? '' }) })) : (_jsx(TextField, { sx: { mt: 1 }, inputProps: { sx: (theme) => ({ fontSize: theme.typography.body2.fontSize }) }, inputRef: (ref) => {
+                                    setTimeout(() => ref?.current?.focus(), 100);
+                                }, defaultValue: comment.value, onChange: e => setEditValue(e.target.value), onKeyDown: checkForActions, fullWidth: true, multiline: true }))] }), _jsx(CardActions, { sx: { px: 0 }, children: _jsx(Collapse, { in: editing || showInteractions || Object.values(comment?.reactions ?? {}).length > 0, sx: { width: '100%' }, children: _jsxs(Stack, { direction: "row", sx: { width: '100%' }, spacing: 0.5, children: [reactions, _jsx(FlexOne, {}), editing && (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", onClick: () => setEditing(false), disabled: loading, children: _jsx(Clear, { fontSize: "small" }) }), _jsx(IconButton, { size: "small", onClick: onEdit, disabled: loading, children: _jsx(Check, { fontSize: "small" }) })] }))] }) }) })] }, comment.timestamp)] }, comment.id));
 };
 export default memo(Comment);

package/components/elements/ContextMenu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KeyboardArrowRight } from '@mui/icons-material';
 import { Box, Divider, Fade, ListItemIcon, ListItemText, Menu, MenuItem, MenuList, Paper, useTheme } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 /**
  * The margin at the bottom of the screen by which a submenu should be inverted.
  * If hovering within this many pixels of the bottom, the submenu renders upward.

package/components/elements/ContextMenu.test.js

@@ -3,8 +3,8 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { omit } from 'lodash-es';
 import { act } from 'react';
 import { vi } from 'vitest';
-// Mock react-router-dom Link
-vi.mock('react-router-dom', () => ({
+// Mock react-router Link
+vi.mock('react-router', () => ({
     Link: ({ to, children, ...props }) => (_jsx("a", { href: to, ...props, children: children }))
 }));
 // Stub MUI components to simple HTML equivalents

package/components/elements/EditRow.d.ts

@@ -1,17 +1,22 @@
 import { type SliderProps } from '@mui/material';
-type EditRowTypes<T extends string | number | boolean> = {
+type EditRowBase<T extends string | number | boolean> = {
     titleKey: string;
     descriptionKey?: string;
     value: T;
-    onEdit?: (value: string) => Promise<void>;
     validate?: (value: T) => boolean;
     failOnValidate?: boolean;
     type?: 'password' | 'number' | 'text' | 'checkbox' | 'range';
     min?: number;
     max?: number;
     step?: number;
-    optional?: boolean;
     valueLabelFormat?: SliderProps['valueLabelFormat'];
 };
-declare const EditRow: <T extends string | number | boolean>({ titleKey, descriptionKey, value, onEdit, validate, failOnValidate, type, min, max, step, valueLabelFormat, optional }: EditRowTypes<T>) => import("react/jsx-runtime").JSX.Element;
+type EditRowTypes<T extends string | number | boolean> = (EditRowBase<T> & {
+    optional?: false;
+    onEdit?: (value: string) => Promise<void>;
+}) | (EditRowBase<T> & {
+    optional: true;
+    onEdit?: (value: string | undefined) => Promise<void>;
+});
+declare const EditRow: <T extends string | number | boolean>({ titleKey, descriptionKey, value, validate, failOnValidate, type, min, max, step, valueLabelFormat, onEdit, optional }: EditRowTypes<T>) => import("react").JSX.Element;
 export default EditRow;

package/components/elements/EditRow.js

@@ -5,7 +5,8 @@ import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar'
 import { isNil, isNull, isUndefined } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnValidate = false, type = 'text', min, max, step, valueLabelFormat, optional }) => {
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
+const EditRow = ({ titleKey, descriptionKey, value, validate, failOnValidate = false, type = 'text', min, max, step, valueLabelFormat, onEdit, optional }) => {
     const { t } = useTranslation();
     const { showErrorMessage } = useMySnackbar();
     const [editing, setEditing] = useState(false);
@@ -14,7 +15,7 @@ const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnVali
     const [editValue, setEditValue] = useState(type === 'password' ? '' : value);
     const [confirmPassword, setConfirmPassword] = useState('');
     useEffect(() => {
-        if ((editValue === undefined || editValue === null) && value) {
+        if (isNil(editValue) && value) {
             setEditValue(value);
         }
     }, [editValue, value]);
@@ -109,7 +110,7 @@ const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnVali
                                                 endAdornment: loading && _jsx(CircularProgress, { size: 24 })
                                             } }))] }), _jsx(IconButton, { onClick: onSubmit, disabled: loading, children: _jsx(Check, { fontSize: "small" }) }), _jsx(IconButton, { onClick: () => setEditing(false), disabled: loading, children: _jsx(Close, { fontSize: "small" }) }), optional && (_jsx(IconButton, { onClick: () => {
                                         setEditing(false);
-                                        void onEdit(null);
-                                    }, disabled: loading, children: _jsx(Delete, { fontSize: "small" }) }))] }) })) : (_jsx(TableCell, { sx: cellSx, width: "100%", children: type === 'checkbox' ? (_jsx(Checkbox, { onChange: ev => onChange(ev.target.checked), checked: value.toString() === 'true' })) : type === 'range' && !isNil(value) ? ((valueLabelFormat ?? (val => `${val}px`))(value)) : ((value ?? t('none'))) })), onEdit && !editing && type !== 'checkbox' && (_jsx(TableCell, { sx: cellSx, align: "right", children: _jsx(IconButton, { onClick: () => setEditing(true), children: _jsx(Edit, { fontSize: "small" }) }) }))] }), descriptionKey && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(descriptionKey) }) }) }))] }));
+                                        void onEdit?.(undefined);
+                                    }, disabled: loading, children: _jsx(Delete, { fontSize: "small" }) }))] }) })) : (_jsx(TableCell, { sx: cellSx, width: "100%", children: type === 'checkbox' ? (_jsx(Checkbox, { onChange: ev => onChange(ev.target.checked), checked: value.toString() === 'true' })) : type === 'range' && notNil(value) ? (typeof valueLabelFormat === 'function' ? (valueLabelFormat(Number(value), 0)) : (`${value}px`)) : ((value ?? t('none'))) })), onEdit && !editing && type !== 'checkbox' && (_jsx(TableCell, { sx: cellSx, align: "right", children: _jsx(IconButton, { onClick: () => setEditing(true), children: _jsx(Edit, { fontSize: "small" }) }) }))] }), descriptionKey && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(descriptionKey) }) }) }))] }));
 };
 export default EditRow;

package/components/elements/MarkdownEditor.js

@@ -51,6 +51,6 @@ const MarkdownEditor = ({ content, setContent, onMount, fontSize = 16, height =
         },
         ...editorOptions
     }), [fontSize, editorOptions]);
-    return (_jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: content, onChange: value => setContent(value), beforeMount: beforeEditorMount, onMount: onMount, options: options }));
+    return (_jsx(ThemedEditor, { height: height, width: width, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', value: content, onChange: value => setContent(value ?? ''), beforeMount: beforeEditorMount, onMount: onMount, options: options }));
 };
 export default memo(MarkdownEditor);

package/components/elements/MembershipManagement.test.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { UserListContext } from '@cccsaurora/howler-ui/components/app/providers/UserListProvider';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { MembershipManagement } from './membership/MembershipManagement';
+const { appUserMock, dispatchApiMock, permissionDeleteMock, permissionPutMock, searchUsersMock, showErrorMessageMock, showSuccessMessageMock } = vi.hoisted(() => ({
+    appUserMock: vi.fn(),
+    dispatchApiMock: vi.fn(),
+    permissionDeleteMock: vi.fn(),
+    permissionPutMock: vi.fn(),
+    searchUsersMock: vi.fn(),
+    showErrorMessageMock: vi.fn(),
+    showSuccessMessageMock: vi.fn()
+}));
+vi.mock('@tui/core', () => ({
+    useAppUser: appUserMock
+}));
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: (key) => key
+    })
+}));
+vi.mock('api', () => ({
+    default: {
+        action: {
+            permission: {
+                delete: permissionDeleteMock,
+                put: permissionPutMock
+            }
+        }
+    }
+}));
+vi.mock('components/hooks/useMyApi', () => ({
+    default: () => ({
+        dispatchApi: dispatchApiMock
+    })
+}));
+vi.mock('components/hooks/useMySnackbar', () => ({
+    default: () => ({
+        showErrorMessage: showErrorMessageMock,
+        showSuccessMessage: showSuccessMessageMock,
+        showWarningMessage: vi.fn()
+    })
+}));
+vi.mock('react-router', () => ({
+    useLocation: () => ({ pathname: '/action/action-id' }),
+    useParams: () => ({ id: 'action-id' })
+}));
+vi.mock('./display/HowlerAvatar', () => ({
+    default: ({ userId }) => _jsx("span", { children: userId })
+}));
+vi.mock('./UserList', () => ({
+    default: ({ onChange }) => (_jsx("button", { onClick: () => onChange(['analyst']), children: "Select analyst" }))
+}));
+describe('MembershipManagement', () => {
+    const entity = {
+        owner: 'owner',
+        admins: [],
+        members: []
+    };
+    const renderMembershipManagement = (overrides = {}, onChange = vi.fn()) => {
+        render(_jsx(UserListContext.Provider, { value: {
+                users: {
+                    analyst: {
+                        email: 'analyst@example.com',
+                        name: 'Analyst',
+                        type: [],
+                        username: 'analyst'
+                    }
+                },
+                fetchUsers: vi.fn(),
+                searchUsers: searchUsersMock
+            }, children: _jsx(MembershipManagement, { type: "action", entity: { ...entity, ...overrides }, onChange: onChange }) }));
+        return onChange;
+    };
+    beforeEach(() => {
+        appUserMock.mockReturnValue({
+            user: {
+                username: 'owner',
+                roles: ['admin']
+            }
+        });
+        permissionPutMock.mockReset();
+        permissionDeleteMock.mockReset();
+        dispatchApiMock.mockReset();
+        searchUsersMock.mockReset();
+        showErrorMessageMock.mockReset();
+        showSuccessMessageMock.mockReset();
+        permissionPutMock.mockImplementation((_id, data) => ({ request: 'grant-permission', data }));
+        permissionDeleteMock.mockImplementation((_id, data) => ({ request: 'remove-permission', data }));
+        dispatchApiMock.mockImplementation(async (request) => {
+            if (request.request === 'grant-permission') {
+                return {
+                    owner: 'owner',
+                    admins: [],
+                    members: ['analyst']
+                };
+            }
+            if (request.request === 'remove-permission') {
+                return {
+                    owner: 'owner',
+                    admins: [],
+                    members: []
+                };
+            }
+        });
+    });
+    it('grants a selected member with the batched permission payload', async () => {
+        const user = userEvent.setup();
+        const onChange = renderMembershipManagement();
+        await user.click(screen.getByRole('button', { name: 'membership.manage' }));
+        await user.click(screen.getByRole('button', { name: 'Select analyst' }));
+        await user.click(screen.getByRole('button', { name: 'add' }));
+        expect(permissionPutMock).toHaveBeenCalledWith('action-id', {
+            privilege: 'members',
+            user_ids: ['analyst']
+        });
+        await waitFor(() => expect(onChange).toHaveBeenCalledWith({ owner: 'owner', admins: [], members: ['analyst'] }));
+        expect(showSuccessMessageMock).toHaveBeenCalledWith('membership.message.success');
+    });
+    it('removes the privilege represented by the selected member row', async () => {
+        const user = userEvent.setup();
+        const onChange = renderMembershipManagement({ admins: ['analyst'] });
+        await user.click(screen.getByRole('button', { name: 'membership.manage' }));
+        const analystRow = screen.getByText('Analyst').closest('li');
+        expect(analystRow).not.toBeNull();
+        await user.click(within(analystRow).getByRole('button'));
+        expect(permissionDeleteMock).toHaveBeenCalledWith('action-id', {
+            privilege: 'admins',
+            user_ids: ['analyst']
+        });
+        expect(dispatchApiMock).toHaveBeenCalledWith({
+            request: 'remove-permission',
+            data: { privilege: 'admins', user_ids: ['analyst'] }
+        }, { throwError: false });
+        await waitFor(() => expect(onChange).toHaveBeenCalledWith({ owner: 'owner', admins: [], members: [] }));
+        expect(showSuccessMessageMock).toHaveBeenCalledWith('membership.message.success');
+    });
+    it('offers owner transfer only to the owner or a global admin', async () => {
+        const user = userEvent.setup();
+        renderMembershipManagement();
+        await user.click(screen.getByRole('button', { name: 'membership.manage' }));
+        expect(screen.getByRole('button', { name: 'membership.privilege.owner' })).toBeInTheDocument();
+    });
+    it('does not offer owner transfer to a local admin', async () => {
+        const user = userEvent.setup();
+        appUserMock.mockReturnValue({
+            user: {
+                username: 'admin',
+                roles: []
+            }
+        });
+        renderMembershipManagement({ admins: ['admin'] });
+        await user.click(screen.getByRole('button', { name: 'membership.manage' }));
+        expect(screen.queryByRole('button', { name: 'membership.privilege.owner' })).not.toBeInTheDocument();
+    });
+    it('does not render membership controls for an unrelated user', () => {
+        appUserMock.mockReturnValue({
+            user: {
+                username: 'analyst',
+                roles: []
+            }
+        });
+        renderMembershipManagement();
+        expect(screen.queryByRole('button', { name: 'membership.manage' })).not.toBeInTheDocument();
+    });
+    it('shows an error when adding a member fails', async () => {
+        const user = userEvent.setup();
+        dispatchApiMock.mockRejectedValueOnce(new Error('request failed'));
+        renderMembershipManagement();
+        await user.click(screen.getByRole('button', { name: 'membership.manage' }));
+        await user.click(screen.getByRole('button', { name: 'Select analyst' }));
+        await user.click(screen.getByRole('button', { name: 'add' }));
+        await waitFor(() => expect(showErrorMessageMock).toHaveBeenCalledWith('membership.message.error'));
+        expect(showSuccessMessageMock).not.toHaveBeenCalled();
+    });
+});

package/components/elements/ObjectDetails.js

@@ -10,7 +10,7 @@ import { memo, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Throttler from '@cccsaurora/howler-ui/utils/Throttler';
 import PluginTypography from './PluginTypography';
-const ListRenderer = memo(({ obj, objKey: key, entries, maxKeyLength }) => {
+const ListRenderer = memo(({ obj, objKey: key = '', entries, maxKeyLength }) => {
     const theme = useTheme();
     const { t } = useTranslation();
     const allPrimitives = useMemo(() => entries.every(entry => !isObject(entry)), [entries]);
@@ -36,13 +36,13 @@ const ListRenderer = memo(({ obj, objKey: key, entries, maxKeyLength }) => {
                         marginBottom: allPrimitives ? 0 : theme.spacing(1)
                     }, children: allPrimitives ? key.padStart(maxKeyLength ?? key.length) : key }) }), _jsxs(Grid, { container: true, spacing: allPrimitives ? 1 : 4, ml: allPrimitives ? -1 : -4, overflow: "hidden", maxWidth: "100%", children: [uniqueEntries.map((entry, index) => {
                         if (Array.isArray(entry)) {
-                            return (_jsx(Grid, { item: true, xs: "auto", maxWidth: "100%", children: _jsx(ListRenderer, { obj: obj, objKey: `${key}.${index}`, entries: entry }) }, index));
+                            return (_jsx(Grid, { size: 'auto', maxWidth: "100%", children: _jsx(ListRenderer, { obj: obj, objKey: `${key}.${index}`, entries: entry }) }, index));
                         }
                         if (isPlainObject(entry)) {
-                            return (_jsx(Grid, { item: true, xs: 'auto', maxWidth: "100%", minWidth: "350px", children: _jsx(ObjectRenderer, { parentKey: `${key}.${index}`, indent: true, data: entry }) }, index));
+                            return (_jsx(Grid, { size: 'auto', maxWidth: "100%", minWidth: "350px", children: _jsx(ObjectRenderer, { parentKey: `${key}.${index}`, indent: true, data: entry }) }, index));
                         }
-                        return (_jsxs(Grid, { item: true, maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), obj: obj, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
-                    }), omittedDuplicates && (_jsx(Grid, { item: true, display: "flex", alignItems: "center", children: _jsx(Tooltip, { title: t('duplicates.omitted'), children: _jsx(InfoOutlined, { sx: { fontSize: '20px', ml: 1 }, color: "disabled" }) }) }))] })] }));
+                        return (_jsxs(Grid, { maxWidth: "100%", className: `${key}_${index}`.replace(/\./g, '_'), component: "code", display: "flex", flexDirection: "row", children: [_jsx(PluginTypography, { context: "details", component: "code", style: { maxWidth: '100%', font: 'inherit' }, value: entry, field: key.replace(/\.[0-9]+/g, ''), obj: obj, children: entry }), allPrimitives && index < uniqueEntries.length - 1 && _jsx("span", { children: "," })] }, entry));
+                    }), omittedDuplicates && (_jsx(Grid, { display: "flex", alignItems: "center", children: _jsx(Tooltip, { title: t('duplicates.omitted'), children: _jsx(InfoOutlined, { sx: { fontSize: '20px', ml: 1 }, color: "disabled" }) }) }))] })] }));
 });
 const ObjectRenderer = memo(({ obj, data, parentKey, indent = false }) => {
     const theme = useTheme();
@@ -96,7 +96,7 @@ const Collapsible = memo(({ obj, title, data, query }) => {
         }
         throttler.debounce(() => {
             const fuseResults = fuse.search(query);
-            setScores(fuseResults.map(result => [result.item.key, result.score]));
+            setScores(fuseResults.map(result => [result.item.key, result.score ?? 0]));
             setResults(fuseResults.reduce((acc, entry) => ({ ...acc, [entry.item.key]: entry.item.value }), {}));
         });
     }, [data, fuse, query, throttler]);

package/components/elements/ThemedEditor.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Editor, useMonaco } from '@monaco-editor/react';
 import { useTheme } from '@mui/material';
-import useThemeBuilder from '@cccsaurora/howler-ui/commons/components/utils/hooks/useThemeBuilder';
-import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
+import { useAppTheme, useAppThemeBuilder } from '@tui/core';
 import { memo, useCallback, useEffect, useMemo } from 'react';
 const ThemedEditor = ({ beforeMount, options = {}, id, ...otherProps }) => {
-    const myTheme = useMyTheme();
-    const themeBuilder = useThemeBuilder(myTheme);
+    const { current: currentTheme, optionsOverride } = useAppTheme();
+    const themeBuilder = useAppThemeBuilder();
+    const { lightTheme, darkTheme } = useMemo(() => themeBuilder(currentTheme, optionsOverride), [themeBuilder, currentTheme, optionsOverride]);
     const theme = useTheme();
     const monaco = useMonaco();
     const _beforeMount = useCallback((_monaco) => {
-        let lightBackground = themeBuilder.lightTheme.palette.background.paper;
+        let lightBackground = lightTheme.palette.background.paper;
         // monaco doesn't like colours in the form #fff, with only three digits.
         if (lightBackground.startsWith('#') && lightBackground.length < 7) {
             lightBackground = lightBackground.replace(/(\w)/g, '$1$1');
@@ -21,30 +21,30 @@ const ThemedEditor = ({ beforeMount, options = {}, id, ...otherProps }) => {
             rules: [
                 {
                     token: 'handlebars',
-                    foreground: themeBuilder.lightTheme.palette.warning.dark.toUpperCase().replaceAll('#', '')
+                    foreground: lightTheme.palette.warning.dark.toUpperCase().replaceAll('#', '')
                 },
                 {
                     token: 'operator',
-                    foreground: themeBuilder.lightTheme.palette.warning.light.toUpperCase().replaceAll('#', '')
+                    foreground: lightTheme.palette.warning.light.toUpperCase().replaceAll('#', '')
                 },
                 {
                     token: 'string.invalid',
-                    foreground: themeBuilder.lightTheme.palette.error.main.toUpperCase().replaceAll('#', '')
+                    foreground: lightTheme.palette.error.main.toUpperCase().replaceAll('#', '')
                 },
                 {
                     token: 'invalid',
-                    foreground: themeBuilder.lightTheme.palette.error.main.toUpperCase().replaceAll('#', '')
+                    foreground: lightTheme.palette.error.main.toUpperCase().replaceAll('#', '')
                 },
                 {
                     token: 'boolean',
-                    foreground: themeBuilder.lightTheme.palette.success.main.toUpperCase().replaceAll('#', '')
+                    foreground: lightTheme.palette.success.main.toUpperCase().replaceAll('#', '')
                 }
             ],
             colors: {
                 'editor.background': lightBackground
             }
         });
-        let darkBackground = themeBuilder.darkTheme.palette.background.paper;
+        let darkBackground = darkTheme.palette.background.paper;
         // monaco doesn't like colours in the form #fff, with only three digits.
         if (darkBackground.startsWith('#') && darkBackground.length < 7) {
             darkBackground = darkBackground.replace(/(\w)/g, '$1$1');
@@ -55,23 +55,23 @@ const ThemedEditor = ({ beforeMount, options = {}, id, ...otherProps }) => {
             rules: [
                 {
                     token: 'handlebars',
-                    foreground: themeBuilder.darkTheme.palette.warning.dark.toUpperCase().replaceAll('#', '')
+                    foreground: darkTheme.palette.warning.dark.toUpperCase().replaceAll('#', '')
                 },
                 {
                     token: 'operator',
-                    foreground: themeBuilder.darkTheme.palette.warning.light.toUpperCase().replaceAll('#', '')
+                    foreground: darkTheme.palette.warning.light.toUpperCase().replaceAll('#', '')
                 },
                 {
                     token: 'string.invalid',
-                    foreground: themeBuilder.darkTheme.palette.error.main.toUpperCase().replaceAll('#', '')
+                    foreground: darkTheme.palette.error.main.toUpperCase().replaceAll('#', '')
                 },
                 {
                     token: 'invalid',
-                    foreground: themeBuilder.darkTheme.palette.error.main.toUpperCase().replaceAll('#', '')
+                    foreground: darkTheme.palette.error.main.toUpperCase().replaceAll('#', '')
                 },
                 {
                     token: 'boolean',
-                    foreground: themeBuilder.darkTheme.palette.success.main.toUpperCase().replaceAll('#', '')
+                    foreground: darkTheme.palette.success.main.toUpperCase().replaceAll('#', '')
                 }
             ],
             colors: {
@@ -81,7 +81,7 @@ const ThemedEditor = ({ beforeMount, options = {}, id, ...otherProps }) => {
         _monaco.languages.register({ id: 'lucene' });
         _monaco.languages.register({ id: 'eql' });
         beforeMount?.(_monaco);
-    }, [beforeMount, themeBuilder]);
+    }, [beforeMount, lightTheme, darkTheme]);
     useEffect(() => {
         if (!monaco) {
             return;

package/components/elements/UserList.d.ts

@@ -1,8 +1,10 @@
 import type { SxProps, Theme } from '@mui/material';
 import type { FC } from 'react';
 declare const UserList: FC<{
+    variant?: 'compact' | 'list';
     buttonSx?: SxProps<Theme>;
     userIds: string[];
+    except?: string[];
     onChange: (userIds: string[]) => void;
     i18nLabel: string;
     avatarHeight?: number;