@cccsaurora/howler-ui 3.1.0-dev.1643 → 3.1.0-dev.1647

package/api/utils/createPermissionsApi.d.ts

@@ -1,7 +1,8 @@
-export type PermissionData = {
+export type PermissionEntry = {
     privilege: string;
-    user_ids: string[];
+    user_id: string;
 };
+export type PermissionData = PermissionEntry[];
 type ParentUri = (id: string) => string;
 declare const createPermissionsApi: <T>(parentUri: ParentUri) => {
     put: (id: string, data: PermissionData) => Promise<T | undefined>;

package/components/elements/MembershipManagement.test.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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';
@@ -51,7 +51,7 @@ vi.mock('./display/HowlerAvatar', () => ({
     default: ({ userId }) => _jsx("span", { children: userId })
 }));
 vi.mock('./UserList', () => ({
-    default: ({ onChange }) => (_jsx("button", { onClick: () => onChange(['analyst']), children: "Select analyst" }))
+    default: ({ onChange }) => (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => onChange(['analyst']), children: "Select analyst" }), _jsx("button", { onClick: () => onChange(['member']), children: "Select member" })] }))
 }));
 describe('MembershipManagement', () => {
     const entity = {
@@ -67,6 +67,12 @@ describe('MembershipManagement', () => {
                         name: 'Analyst',
                         type: [],
                         username: 'analyst'
+                    },
+                    member: {
+                        email: 'member@example.com',
+                        name: 'Member',
+                        type: [],
+                        username: 'member'
                     }
                 },
                 fetchUsers: vi.fn(),
@@ -106,16 +112,20 @@ describe('MembershipManagement', () => {
             }
         });
     });
-    it('grants a selected member with the batched permission payload', async () => {
+    it('adds a selected user immediately and saves the selected privilege', 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 user.click(screen.getByRole('button', { name: 'Select member' }));
+        const roleSelects = screen.getAllByRole('combobox');
+        await user.click(roleSelects[0]);
+        await user.click(screen.getByRole('option', { name: 'membership.privilege.admins' }));
+        await user.click(screen.getByRole('button', { name: 'button.save' }));
+        expect(permissionPutMock).toHaveBeenCalledWith('action-id', [
+            { privilege: 'admins', user_id: 'analyst' },
+            { privilege: 'members', user_id: 'member' }
+        ]);
         await waitFor(() => expect(onChange).toHaveBeenCalledWith({ owner: 'owner', admins: [], members: ['analyst'] }));
         expect(showSuccessMessageMock).toHaveBeenCalledWith('membership.message.success');
     });
@@ -126,13 +136,10 @@ describe('MembershipManagement', () => {
         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(permissionDeleteMock).toHaveBeenCalledWith('action-id', [{ privilege: 'admins', user_id: 'analyst' }]);
         expect(dispatchApiMock).toHaveBeenCalledWith({
             request: 'remove-permission',
-            data: { privilege: 'admins', user_ids: ['analyst'] }
+            data: [{ privilege: 'admins', user_id: 'analyst' }]
         }, { throwError: false });
         await waitFor(() => expect(onChange).toHaveBeenCalledWith({ owner: 'owner', admins: [], members: [] }));
         expect(showSuccessMessageMock).toHaveBeenCalledWith('membership.message.success');
@@ -141,7 +148,9 @@ describe('MembershipManagement', () => {
         const user = userEvent.setup();
         renderMembershipManagement();
         await user.click(screen.getByRole('button', { name: 'membership.manage' }));
-        expect(screen.getByRole('button', { name: 'membership.privilege.owner' })).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Select analyst' }));
+        await user.click(screen.getAllByRole('combobox')[0]);
+        expect(screen.getByRole('option', { name: 'membership.privilege.owner' })).toBeInTheDocument();
     });
     it('does not offer owner transfer to a local admin', async () => {
         const user = userEvent.setup();
@@ -153,7 +162,9 @@ describe('MembershipManagement', () => {
         });
         renderMembershipManagement({ admins: ['admin'] });
         await user.click(screen.getByRole('button', { name: 'membership.manage' }));
-        expect(screen.queryByRole('button', { name: 'membership.privilege.owner' })).not.toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Select analyst' }));
+        await user.click(screen.getAllByRole('combobox')[0]);
+        expect(screen.queryByRole('option', { name: 'membership.privilege.owner' })).not.toBeInTheDocument();
     });
     it('does not render membership controls for an unrelated user', () => {
         appUserMock.mockReturnValue({
@@ -171,7 +182,7 @@ describe('MembershipManagement', () => {
         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 user.click(screen.getByRole('button', { name: 'button.save' }));
         await waitFor(() => expect(showErrorMessageMock).toHaveBeenCalledWith('membership.message.error'));
         expect(showSuccessMessageMock).not.toHaveBeenCalled();
     });

package/components/elements/UserList.d.ts

@@ -10,5 +10,6 @@ declare const UserList: FC<{
     avatarHeight?: number;
     disabled?: boolean;
     multiple?: boolean;
+    showEmptyInput?: boolean;
 }>;
 export default UserList;

package/components/elements/UserList.js

@@ -16,7 +16,7 @@ const UserEntry = ({ user }) => {
             columnGap: 1.5
         }, children: [_jsx(HowlerAvatar, { sx: { gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }, userId: user?.username }), _jsx(Typography, { sx: { gridArea: 'name' }, variant: "body1", children: user?.name }), _jsx(Typography, { sx: { gridArea: 'email' }, variant: "caption", children: user?.email ?? '' })] }));
 };
-const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight = 32, multiple = false, disabled = false, variant = 'compact', except = [] }) => {
+const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight = 32, multiple = false, disabled = false, variant = 'compact', except = [], showEmptyInput = false }) => {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
     const { users, fetchUsers, searchUsers } = useContext(UserListContext);
@@ -26,7 +26,11 @@ const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight =
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [userIds]);
     const throttler = useMemo(() => new Throttler(300), []);
-    const search = (value) => throttler.debounce(() => searchUsers(value));
+    const search = (value) => throttler.debounce(() => {
+        if (value) {
+            searchUsers(value);
+        }
+    });
     const renderInput = (params) => (_jsx(TextField, { ...params, autoComplete: "off", label: t(i18nLabel), size: "small" }));
     const renderOption = (props, optionUserId) => {
         const { key, ...optionProps } = props;
@@ -46,6 +50,6 @@ const UserList = ({ buttonSx = {}, userIds, onChange, i18nLabel, avatarHeight =
         } })) : (_jsx(Autocomplete, { ...sharedAutocompleteProps, value: userIds?.[0] ?? null, onChange: (__, option) => {
             onChange(option ? [option] : []);
         } }));
-    return (_jsxs(_Fragment, { children: [variant === 'compact' ? (multiple ? (_jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(AvatarGroup, { children: uniq(userIds ?? [null]).map(userId => (_jsx(HowlerAvatar, { userId: userId, sx: { height: avatarHeight, width: avatarHeight } }, userId))) }), _jsx(IconButton, { size: "small", sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(Add, {}) })] })) : (_jsx(IconButton, { sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userIds[0], sx: { height: avatarHeight, width: avatarHeight } }) }))) : multiple ? (_jsxs(Stack, { width: "100%", spacing: 1, alignItems: "stretch", divider: _jsx(Divider, { flexItem: true }), children: [uniq(userIds ?? [null]).map(userId => (_jsx(UserEntry, { user: users[userId] }, userId))), autocomplete] })) : (_jsxs(Stack, { direction: "row", children: [_jsx(HowlerAvatar, { userId: userIds[0], sx: { height: avatarHeight, width: avatarHeight } }), _jsx(Typography, { children: userIds[0] })] })), variant === 'compact' && (_jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: autocomplete }) }))] }));
+    return (_jsxs(_Fragment, { children: [variant === 'compact' ? (multiple ? (_jsxs(Stack, { direction: "row", spacing: 0.25, alignItems: "center", children: [_jsx(AvatarGroup, { children: uniq(userIds ?? [null]).map(userId => (_jsx(HowlerAvatar, { userId: userId, sx: { height: avatarHeight, width: avatarHeight } }, userId))) }), _jsx(IconButton, { size: "small", sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(Add, {}) })] })) : (_jsx(IconButton, { sx: buttonSx, disabled: disabled, onClick: e => setAnchorEl(e.currentTarget), children: _jsx(HowlerAvatar, { userId: userIds[0], sx: { height: avatarHeight, width: avatarHeight } }) }))) : multiple ? (_jsxs(Stack, { width: "100%", spacing: 1, alignItems: "stretch", divider: _jsx(Divider, { flexItem: true }), children: [uniq(userIds ?? [null]).map(userId => (_jsx(UserEntry, { user: users[userId] }, userId))), autocomplete] })) : userIds.length > 0 ? (_jsxs(Stack, { direction: "row", children: [_jsx(HowlerAvatar, { userId: userIds[0], sx: { height: avatarHeight, width: avatarHeight } }), _jsx(Typography, { children: userIds[0] })] })) : showEmptyInput ? (autocomplete) : null, variant === 'compact' && (_jsx(Popover, { open: !!anchorEl, onClose: () => setAnchorEl(null), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, children: _jsx(Box, { sx: { p: 2 }, children: autocomplete }) }))] }));
 };
 export default UserList;

package/components/elements/UserList.test.js

@@ -107,6 +107,24 @@ describe('UserList', () => {
         expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
         expect(screen.queryByRole('button')).not.toBeInTheDocument();
     });
+    it('renders an inline picker for an empty list variant single mode when enabled', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: [], onChange: onChange, variant: "list", showEmptyInput: true }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        const combo = screen.getByRole('combobox', { name: 'user.list.label' });
+        await user.click(combo);
+        const listbox = await screen.findByRole('listbox');
+        await user.click(within(listbox).getByText('Bob Analyst'));
+        expect(onChange).toHaveBeenCalledWith(['analystB']);
+    });
+    it('does not render an empty picker in list variant single mode by default', () => {
+        render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: [], onChange: vi.fn(), variant: "list" }), {
+            wrapper: createWrapper(defaultUsers)
+        });
+        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+    });
     it('does not open popover when disabled', async () => {
         const onChange = vi.fn();
         render(_jsx(UserList, { i18nLabel: "user.list.label", userIds: ['analystA'], onChange: onChange, disabled: true, multiple: true }), {

package/components/elements/membership/MembershipManagement.js

@@ -1,6 +1,6 @@
 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 { Button, Dialog, DialogContent, DialogTitle, Divider, FormControl, IconButton, InputLabel, List, ListItem, ListItemText, MenuItem, Select, Stack, TextField } from '@mui/material';
 import { useAppUser } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
@@ -23,30 +23,33 @@ export const MembershipManagement = ({ type, entity, onChange, size }) => {
     const { showSuccessMessage, showWarningMessage, showErrorMessage } = useMySnackbar();
     const [selectedUserIds, setSelectedUserIds] = useState([]);
     const [memberQuery, setMemberQuery] = useState('');
-    const [privilege, setPrivilege] = useState('members');
+    const [pendingMembers, setPendingMembers] = useState([]);
     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 users = useMyUserList([...members.map(([member]) => member), ...pendingMembers.map(({ user_id }) => user_id)]);
+    const handleQueueMember = useCallback(([user_id]) => {
+        if (!user_id) {
+            return;
+        }
+        setPendingMembers(current => [...current, { user_id, privilege: 'members' }]);
+        setSelectedUserIds([]);
+    }, []);
     const handleAddMember = useCallback(async () => {
-        if (selectedUserIds.length === 0) {
+        if (pendingMembers.length === 0) {
             showWarningMessage(t('membership.message.warning'));
             return;
         }
         try {
-            const updatedEntity = (await dispatchApi(api[type].permission.put(params.id, {
-                privilege,
-                user_ids: selectedUserIds
-            })));
+            const updatedEntity = (await dispatchApi(api[type].permission.put(params.id, pendingMembers)));
             if (!updatedEntity) {
                 throw new Error('Updated Entity was not returned.');
             }
-            showSuccessMessage(t('membership.message.success'));
             onChange(updatedEntity);
-            setSelectedUserIds([]);
-            setMemberQuery('');
+            showSuccessMessage(t('membership.message.success'));
+            setPendingMembers([]);
         }
         catch {
             showErrorMessage(t('membership.message.error'));
@@ -54,8 +57,7 @@ export const MembershipManagement = ({ type, entity, onChange, size }) => {
     }, [
         dispatchApi,
         params.id,
-        selectedUserIds,
-        privilege,
+        pendingMembers,
         t,
         showSuccessMessage,
         showErrorMessage,
@@ -66,10 +68,7 @@ export const MembershipManagement = ({ type, entity, onChange, size }) => {
     // 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]
-            }), {
+            const updatedEntity = (await dispatchApi(api[type].permission.delete(params.id, [{ privilege: targetPrivilege, user_id }]), {
                 throwError: false
             }));
             if (!updatedEntity) {
@@ -85,9 +84,8 @@ export const MembershipManagement = ({ type, entity, onChange, size }) => {
     useEffect(() => {
         if (open) {
             // Reset modal state each time it opens to avoid leaking stale UI state.
-            setSelectedUserIds([]);
             setMemberQuery('');
-            setPrivilege('members');
+            setPendingMembers([]);
         }
         // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [open]);
@@ -108,12 +106,19 @@ export const MembershipManagement = ({ type, entity, onChange, size }) => {
     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
+    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', minWidth: '840px', 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, flex: 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') })] })] }) })] })] }));
+                                                                : 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, flex: 1, children: [_jsx(UserList, { variant: "list", i18nLabel: t('page.login.username'), userIds: selectedUserIds, onChange: handleQueueMember, except: [...members.map(([member]) => member), ...pendingMembers.map(({ user_id }) => user_id)], disabled: !params.id, showEmptyInput: true }), _jsx(List, { children: pendingMembers.map(({ user_id, privilege }) => {
+                                                const roleLabelId = `pending-member-role-${user_id}`;
+                                                const hasPendingOwner = pendingMembers.some(member => member.user_id !== user_id && member.privilege === 'owner');
+                                                return (_jsxs(ListItem, { disableGutters: true, sx: {
+                                                        display: 'grid',
+                                                        gridTemplateColumns: 'minmax(0, 1fr) auto',
+                                                        gridTemplateRows: 'auto auto',
+                                                        columnGap: 1,
+                                                        rowGap: 1
+                                                    }, children: [_jsxs(Stack, { direction: "row", sx: { gridColumn: 1, gridRow: 1 }, children: [_jsx(HowlerAvatar, { userId: user_id || 'Unknown' }), _jsx(ListItemText, { primary: users[user_id]?.name || user_id, secondary: users[user_id]?.email, sx: { mx: 1 } })] }), _jsxs(FormControl, { size: "small", sx: { minWidth: 150, gridColumn: 1, gridRow: 2 }, children: [_jsx(InputLabel, { id: roleLabelId, children: t('membership.role') }), _jsx(Select, { labelId: roleLabelId, label: t('membership.role'), value: privilege, onChange: event => setPendingMembers(current => current.map(member => member.user_id === user_id
+                                                                        ? { ...member, privilege: event.target.value }
+                                                                        : member)), children: availablePrivileges.map(option => (_jsx(MenuItem, { value: option, disabled: option === 'owner' && hasPendingOwner, children: getPrivilegeLabel(option) }, option))) })] }), _jsx(IconButton, { "aria-label": t('button.delete'), sx: { gridColumn: 2, gridRow: 1 }, onClick: () => setPendingMembers(current => current.filter(member => member.user_id !== user_id)), children: _jsx(Delete, { color: "error" }) })] }, user_id));
+                                            }) }), _jsx(Button, { onClick: handleAddMember, sx: { mt: 3 }, variant: "contained", fullWidth: true, disabled: !params.id || pendingMembers.length === 0, children: t('button.save') })] })] }) })] })] }));
 };

package/locales/en/translation.json

@@ -323,6 +323,7 @@
     "membership.message.error": "There was an error when updating permissions.",
     "membership.message.success": "Permissions updated.",
     "membership.message.warning": "No users selected.",
+    "membership.role": "Role",
     "membership.privilege.admins": "Administrator",
     "membership.privilege.manage": "Manage Privileges",
     "membership.privilege.members": "Member",

package/locales/fr/translation.json

@@ -323,6 +323,7 @@
     "membership.message.error": "Il y a eu une erreur durant la mise a jours des permissions",
     "membership.message.success": "Permissions misse à jours.",
     "membership.message.warning": "Aucun utilisateur sélectionné",
+    "membership.role": "Rôle",
     "membership.privilege.admins": "Administrateur",
     "membership.privilege.manage": "Gérer privilèges",
     "membership.privilege.members": "Membre",

package/package.json

@@ -97,7 +97,7 @@
     "url": "https://github.com/CybercentreCanada/howler"
   },
   "type": "module",
-  "version": "3.1.0-dev.1643",
+  "version": "3.1.0-dev.1647",
   "exports": {
     "./i18n": "./i18n.js",
     "./index.css": "./index.css",