feat(permissions): granular permission gating + role editor & presets (#747, phase 1 of #743) (#1045)
* feat(permissions): granular permission gating + role editor & presets Make every admin feature permission-gateable so multi-user studios can split capability across roles (#747, and phase 1 of #743). - Split the catch-all settings.edit into dedicated dangerous-config perms (banking / domains / security / integrations / features): a team member can no longer change IBAN, domains, SSO, webhooks, API tokens or feature flags. Reads keep an OR with settings.view so existing roles keep visibility. The site-URL write inside /general is change-gated on settings.domains. - Add dedicated perms for admin surfaces miscategorised under settings.* (whatsapp, event_types, image_security, notifications, system) plus roles.manage and vat_codes.view; gate the previously-ungated VAT read. - Boot self-heal (_permissionsBoot.js): super_admin always holds every permission (tracks-all) so new perms never need a compensation migration; all other roles stay frozen (no silent escalation on upgrade). - Seed two presets: Solo Photographer (full operator) and Team Photographer (contributor — view events + manage photos + read-only CRM; no settings/users/billing edits, no events.edit). - Role editor: adminRoles CRUD (create/edit/clone/delete + permission matrix; system roles protected, super_admin immutable) and a Roles tab with a category-grouped matrix and preset cloning. - Settings page tabs are permission-gated with snap-back; i18n en/de. Migration 174. Backward-compatible: admin/editor/viewer unchanged. * feat(permissions): hide in-page action buttons a role can't use Wrap mutating controls on the surfaces restricted roles actually reach (Events list, Archives, gallery photo grid, event detail) in PermissionGate so they are HIDDEN when the user lacks the permission, rather than shown-then-403: - Events list: create / bulk archive / bulk delete / row archive / row delete / download-archive. - Archives: restore / download / delete. - Photo grid: single + bulk delete (photos.delete), per-photo download (photos.download), bulk move/hide/show (photos.edit). - Event detail: edit / rename / publish (events.edit), duplicate (events.create), archive (events.archive), create-invoice (bills.manage); the Actions card is hidden entirely for view-only roles. - Photos tab: upload / external import (photos.upload), export menu (photos.download). Backend already enforces these with 403; this is the matching UX so a Team Photographer never sees delete/settings controls. * fix(permissions): close settings-split bypass via generic settings writers Security review found the settings.edit split was bypassable: the generic settings writers (/general, /analytics, /seo, /security) upsert arbitrary setting_keys, so a role holding only settings.edit (or settings.security) could write keys owned by a narrower permission — repointing the public site URL (settings.domains), security policy (settings.security) or VAT/accounting config (settings.banking) via the wrong endpoint. Add stripUnauthorizedProtectedKeys(): before every generic upsert, drop any protected key the caller isn't permitted to write (general_site_url → settings.domains, security_* → settings.security, accounting_* → settings.banking). Dedicated routes still work because their caller holds the matching perm. Replaces the narrower in-handler site-URL guard. Also fix two tests affected by the RBAC changes: - authzPermissionGaps: API-token management moved to settings.integrations, so grant that (not settings.edit) to exercise the ownership 404. - AdminPhotoGrid.viewToggle: stub PermissionGate (its buttons are now gated and the test renders without a PermissionsProvider). * fix(permissions): address upstream review (#1045) - Renumber migration 174 -> 175 (174 now taken by 174_sqlite_nullable_event_dates from #1035; the collision made picpeakImportService's forward-only restore guard treat both as order 174 and accept a newer .picpeak onto an older schema). - Contain the roles.manage blast radius (delegation, not root escalation): a non-super_admin can no longer edit their own role, nor grant any permission their own role doesn't already hold (createRole + updateRole). - Protected-key denial now 403s (naming the keys + required perms) instead of silently stripping and reporting "saved" (adminSettings generic writers). - Reserve team_photographer so a custom role can't squat the preset name. - Boot self-heal: per-step try/catch so a role_permissions insert race on one replica doesn't skip preset seeding. - Forward-project the feature .manage perms that also replaced settings.edit gates (whatsapp/event_types/image_security/notifications/system), matching the settings.* split projection so the pattern is symmetric for phase-2. - Guard exports.down's roles/admin_users queries with hasTable. * fix(permissions): change-detection on protected-key 403 + commit guard tests (#1045) Round-2 review: - The protected-key 403 fired on key PRESENCE. The General tab re-posts general_site_url on every save, so a settings.edit-only role (the office manager this PR enables) got 403'd on every General save even when the URL was unchanged. Restore change-detection: compare the incoming value against the stored one and 403 only on an actual change; unchanged protected keys are dropped so the rest of the save proceeds. Only /general is affected. - Commit the self-amplification guard test (was run locally, never staged): adminRolesGuards.test.js — non-super can't grant perms it lacks, can't edit its own role, can't escalate another role; super_admin bypasses; team_photographer name reserved. - Add adminSettingsProtectedKeys.test.js pinning the change-detection: an unchanged general_site_url saves, an actual change 403s, super_admin changes it.
This commit is contained in:
Luca
@@ -10,6 +10,7 @@ import { uploadsService } from '../../services/uploads.service';
|
||||
import { useLocalizedDate } from '../../hooks/useLocalizedDate';
|
||||
import { getPhotoViewMode, setPhotoViewMode, type PhotoViewMode } from '../../utils/photoViewPrefs';
|
||||
import { Button } from '../common';
|
||||
import { PermissionGate } from './PermissionGate';
|
||||
import { AdminAuthenticatedImage } from './AdminAuthenticatedImage';
|
||||
import { BulkCategoryModal } from './BulkCategoryModal';
|
||||
|
||||
@@ -209,50 +210,54 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
|
||||
<span className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{t('gallery.photosSelected', { count: selectedPhotos.size })}
|
||||
</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsCategoryModalOpen(true)}
|
||||
leftIcon={<FolderOpen className="w-4 h-4" />}
|
||||
>
|
||||
{t('photos.moveToCategory', 'Move to Category')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await photosService.bulkUpdatePhotos(eventId, Array.from(selectedPhotos), { visibility: 'hidden' });
|
||||
toast.success(t('admin.photos.hiddenSuccess', 'Photos hidden'));
|
||||
onPhotosDeleted();
|
||||
} catch { toast.error(t('common.error')); }
|
||||
}}
|
||||
leftIcon={<EyeOff className="w-4 h-4" />}
|
||||
>
|
||||
{t('admin.photos.hideSelected', 'Hide')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await photosService.bulkUpdatePhotos(eventId, Array.from(selectedPhotos), { visibility: 'visible' });
|
||||
toast.success(t('admin.photos.visibleSuccess', 'Photos visible'));
|
||||
onPhotosDeleted();
|
||||
} catch { toast.error(t('common.error')); }
|
||||
}}
|
||||
leftIcon={<Eye className="w-4 h-4" />}
|
||||
>
|
||||
{t('admin.photos.showSelected', 'Show')}
|
||||
</Button>
|
||||
<button
|
||||
onClick={handleDeleteSelected}
|
||||
disabled={isDeleting}
|
||||
className="px-3 py-1.5 text-sm font-medium text-white bg-red-600 hover:bg-red-700 disabled:bg-red-400 rounded-lg flex items-center gap-2"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
{t('gallery.deleteSelected', 'Delete Selected')}
|
||||
</button>
|
||||
<PermissionGate permission="photos.edit">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsCategoryModalOpen(true)}
|
||||
leftIcon={<FolderOpen className="w-4 h-4" />}
|
||||
>
|
||||
{t('photos.moveToCategory', 'Move to Category')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await photosService.bulkUpdatePhotos(eventId, Array.from(selectedPhotos), { visibility: 'hidden' });
|
||||
toast.success(t('admin.photos.hiddenSuccess', 'Photos hidden'));
|
||||
onPhotosDeleted();
|
||||
} catch { toast.error(t('common.error')); }
|
||||
}}
|
||||
leftIcon={<EyeOff className="w-4 h-4" />}
|
||||
>
|
||||
{t('admin.photos.hideSelected', 'Hide')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
try {
|
||||
await photosService.bulkUpdatePhotos(eventId, Array.from(selectedPhotos), { visibility: 'visible' });
|
||||
toast.success(t('admin.photos.visibleSuccess', 'Photos visible'));
|
||||
onPhotosDeleted();
|
||||
} catch { toast.error(t('common.error')); }
|
||||
}}
|
||||
leftIcon={<Eye className="w-4 h-4" />}
|
||||
>
|
||||
{t('admin.photos.showSelected', 'Show')}
|
||||
</Button>
|
||||
</PermissionGate>
|
||||
<PermissionGate permission="photos.delete">
|
||||
<button
|
||||
onClick={handleDeleteSelected}
|
||||
disabled={isDeleting}
|
||||
className="px-3 py-1.5 text-sm font-medium text-white bg-red-600 hover:bg-red-700 disabled:bg-red-400 rounded-lg flex items-center gap-2"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
{t('gallery.deleteSelected', 'Delete Selected')}
|
||||
</button>
|
||||
</PermissionGate>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
@@ -420,19 +425,23 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
|
||||
|
||||
{!isSelectionMode && (
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={(e) => handleDownload(photo, e)}
|
||||
className="p-1 text-white hover:bg-white/20 rounded"
|
||||
>
|
||||
<Download className="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => handleDeleteSingle(photo, e)}
|
||||
className="p-1 text-white hover:bg-white/20 rounded disabled:opacity-50"
|
||||
disabled={isDeleting}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
<PermissionGate permission="photos.download">
|
||||
<button
|
||||
onClick={(e) => handleDownload(photo, e)}
|
||||
className="p-1 text-white hover:bg-white/20 rounded"
|
||||
>
|
||||
<Download className="w-3 h-3" />
|
||||
</button>
|
||||
</PermissionGate>
|
||||
<PermissionGate permission="photos.delete">
|
||||
<button
|
||||
onClick={(e) => handleDeleteSingle(photo, e)}
|
||||
className="p-1 text-white hover:bg-white/20 rounded disabled:opacity-50"
|
||||
disabled={isDeleting}
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
</PermissionGate>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -666,21 +675,25 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
|
||||
<td className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
|
||||
{!isSelectionMode && (
|
||||
<div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
|
||||
<button
|
||||
onClick={(e) => handleDownload(photo, e)}
|
||||
className="p-1.5 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-600 rounded"
|
||||
title={t('common.download', 'Download')}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => handleDeleteSingle(photo, e)}
|
||||
className="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/30 rounded disabled:opacity-50"
|
||||
disabled={isRowDeleting}
|
||||
title={t('common.delete', 'Delete')}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
<PermissionGate permission="photos.download">
|
||||
<button
|
||||
onClick={(e) => handleDownload(photo, e)}
|
||||
className="p-1.5 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-600 rounded"
|
||||
title={t('common.download', 'Download')}
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
</button>
|
||||
</PermissionGate>
|
||||
<PermissionGate permission="photos.delete">
|
||||
<button
|
||||
onClick={(e) => handleDeleteSingle(photo, e)}
|
||||
className="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/30 rounded disabled:opacity-50"
|
||||
disabled={isRowDeleting}
|
||||
title={t('common.delete', 'Delete')}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</PermissionGate>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
|
||||
@@ -0,0 +1,285 @@
|
||||
import React, { useMemo, useState, useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { X, Shield, Lock, Save } from 'lucide-react';
|
||||
|
||||
import { Button, Input, Card } from '../common';
|
||||
import type { PermissionDef, RoleWithPermissions } from '../../services/roles.service';
|
||||
|
||||
export interface RoleEditorSave {
|
||||
name?: string;
|
||||
displayName: string;
|
||||
description?: string;
|
||||
permissions: string[];
|
||||
}
|
||||
|
||||
interface RoleEditorModalProps {
|
||||
isOpen: boolean;
|
||||
mode: 'create' | 'edit';
|
||||
role: RoleWithPermissions | null; // null for create
|
||||
catalog: PermissionDef[];
|
||||
isLoading: boolean;
|
||||
onClose: () => void;
|
||||
onSave: (payload: RoleEditorSave) => void;
|
||||
}
|
||||
|
||||
// Friendly labels for permission categories (fallback: the raw category name).
|
||||
const CATEGORY_LABELS: Record<string, string> = {
|
||||
events: 'Events',
|
||||
photos: 'Photos',
|
||||
archives: 'Archives',
|
||||
analytics: 'Analytics',
|
||||
email: 'Email',
|
||||
branding: 'Branding',
|
||||
cms: 'CMS Pages',
|
||||
settings: 'Settings & Config',
|
||||
backup: 'Backup & Restore',
|
||||
users: 'Users & Roles',
|
||||
activity: 'Activity Logs',
|
||||
customers: 'Customers',
|
||||
quotes: 'Quotes',
|
||||
billing: 'Invoices',
|
||||
contracts: 'Contracts',
|
||||
accounting: 'Accounting',
|
||||
workflows: 'Workflows',
|
||||
whatsapp: 'WhatsApp',
|
||||
system: 'System',
|
||||
};
|
||||
|
||||
function categoryLabel(cat: string): string {
|
||||
return CATEGORY_LABELS[cat] || cat.charAt(0).toUpperCase() + cat.slice(1);
|
||||
}
|
||||
|
||||
export const RoleEditorModal: React.FC<RoleEditorModalProps> = ({
|
||||
isOpen,
|
||||
mode,
|
||||
role,
|
||||
catalog,
|
||||
isLoading,
|
||||
onClose,
|
||||
onSave,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const isSuperAdmin = role?.name === 'super_admin';
|
||||
const readOnly = isSuperAdmin; // super_admin's permission set is immutable
|
||||
|
||||
const [name, setName] = useState('');
|
||||
const [displayName, setDisplayName] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [selected, setSelected] = useState<Set<string>>(new Set());
|
||||
const [nameError, setNameError] = useState<string | undefined>();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
setName(mode === 'edit' ? (role?.name ?? '') : '');
|
||||
setDisplayName(role?.displayName ?? '');
|
||||
setDescription(role?.description ?? '');
|
||||
setSelected(new Set(role?.permissions ?? []));
|
||||
setNameError(undefined);
|
||||
}, [isOpen, mode, role]);
|
||||
|
||||
// Group the catalog by category, preserving a stable order.
|
||||
const grouped = useMemo(() => {
|
||||
const map = new Map<string, PermissionDef[]>();
|
||||
for (const p of catalog) {
|
||||
if (!map.has(p.category)) map.set(p.category, []);
|
||||
map.get(p.category)!.push(p);
|
||||
}
|
||||
return Array.from(map.entries()).sort((a, b) => categoryLabel(a[0]).localeCompare(categoryLabel(b[0])));
|
||||
}, [catalog]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const togglePerm = (permName: string) => {
|
||||
if (readOnly) return;
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(permName)) next.delete(permName);
|
||||
else next.add(permName);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleCategory = (perms: PermissionDef[], allSelected: boolean) => {
|
||||
if (readOnly) return;
|
||||
setSelected((prev) => {
|
||||
const next = new Set(prev);
|
||||
for (const p of perms) {
|
||||
if (allSelected) next.delete(p.name);
|
||||
else next.add(p.name);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (mode === 'create') {
|
||||
const normalized = name.trim().toLowerCase();
|
||||
if (!/^[a-z][a-z0-9_]{1,48}$/.test(normalized)) {
|
||||
setNameError(t('roleEditor.nameError', 'Use lowercase letters, numbers and underscores (2–49 chars, starting with a letter).'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
onSave({
|
||||
name: mode === 'create' ? name.trim().toLowerCase() : undefined,
|
||||
displayName: displayName.trim() || name.trim(),
|
||||
description: description.trim(),
|
||||
permissions: Array.from(selected),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<Card className="w-full max-w-3xl max-h-[90vh] flex flex-col">
|
||||
<div className="p-6 flex-1 overflow-y-auto">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-5 h-5 text-accent" />
|
||||
<h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{mode === 'create'
|
||||
? t('roleEditor.createTitle', 'Create role')
|
||||
: t('roleEditor.editTitle', 'Edit role: {{name}}', { name: role?.displayName })}
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors"
|
||||
disabled={isLoading}
|
||||
>
|
||||
<X className="w-5 h-5 text-neutral-500 dark:text-neutral-400" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{readOnly && (
|
||||
<div className="mb-4 flex items-start gap-2 p-3 rounded-lg bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800">
|
||||
<Lock className="w-4 h-4 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
|
||||
<p className="text-sm text-amber-700 dark:text-amber-300">
|
||||
{t('roleEditor.superAdminLocked', 'Super Admin always holds every permission and cannot be edited. It automatically gains new permissions as features are added.')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Identity fields */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-2">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||
{t('roleEditor.displayName', 'Display name')}
|
||||
</label>
|
||||
<Input
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
placeholder={t('roleEditor.displayNamePlaceholder', 'e.g. Photographer')}
|
||||
disabled={isLoading || readOnly}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||
{t('roleEditor.key', 'Key (identifier)')}
|
||||
</label>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(e) => { setName(e.target.value); setNameError(undefined); }}
|
||||
placeholder="photographer"
|
||||
disabled={isLoading || mode === 'edit'}
|
||||
/>
|
||||
{nameError && <p className="mt-1 text-sm text-red-600">{nameError}</p>}
|
||||
{mode === 'edit' && (
|
||||
<p className="mt-1 text-xs text-neutral-400 dark:text-neutral-500">
|
||||
{t('roleEditor.keyLocked', 'The key is fixed once a role is created.')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||
{t('roleEditor.description', 'Description')}
|
||||
</label>
|
||||
<Input
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder={t('roleEditor.descriptionPlaceholder', 'What this role is for')}
|
||||
disabled={isLoading || readOnly}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Permission matrix */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-sm font-semibold text-neutral-700 dark:text-neutral-300">
|
||||
{t('roleEditor.permissions', 'Permissions')}
|
||||
</h3>
|
||||
<span className="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
{t('roleEditor.selectedCount', '{{count}} selected', { count: selected.size })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{grouped.map(([category, perms]) => {
|
||||
const selectedInCat = perms.filter((p) => selected.has(p.name)).length;
|
||||
const allSelected = selectedInCat === perms.length;
|
||||
return (
|
||||
<div key={category} className="border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden">
|
||||
<div className="flex items-center justify-between px-3 py-2 bg-neutral-50 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-neutral-800 dark:text-neutral-200">{categoryLabel(category)}</span>
|
||||
<span className="text-xs text-neutral-400 dark:text-neutral-500">{selectedInCat}/{perms.length}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleCategory(perms, allSelected)}
|
||||
disabled={readOnly}
|
||||
className="text-xs font-medium text-accent hover:underline disabled:opacity-40 disabled:no-underline"
|
||||
>
|
||||
{allSelected ? t('roleEditor.clearAll', 'Clear all') : t('roleEditor.selectAll', 'Select all')}
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4">
|
||||
{perms.map((p) => {
|
||||
const checked = selected.has(p.name);
|
||||
return (
|
||||
<label
|
||||
key={p.name}
|
||||
className={`flex items-start gap-2 px-3 py-2 border-t border-neutral-100 dark:border-neutral-700/60 ${readOnly ? 'cursor-default' : 'cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-700/40'}`}
|
||||
title={p.description || undefined}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => togglePerm(p.name)}
|
||||
disabled={readOnly}
|
||||
className="mt-0.5 rounded border-neutral-300 dark:border-neutral-600 text-accent focus:ring-accent"
|
||||
/>
|
||||
<span className="min-w-0">
|
||||
<span className="block text-sm text-neutral-800 dark:text-neutral-200">{p.display_name}</span>
|
||||
<span className="block text-[11px] text-neutral-400 dark:text-neutral-500 font-mono truncate">{p.name}</span>
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 p-4 border-t border-neutral-200 dark:border-neutral-700">
|
||||
<Button type="button" variant="outline" onClick={onClose} disabled={isLoading}>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
{!readOnly && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
onClick={handleSave}
|
||||
isLoading={isLoading}
|
||||
leftIcon={<Save className="w-4 h-4" />}
|
||||
>
|
||||
{mode === 'create' ? t('roleEditor.create', 'Create role') : t('common.save', 'Save')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
RoleEditorModal.displayName = 'RoleEditorModal';
|
||||
@@ -0,0 +1,229 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Shield, Plus, Edit, Copy, Trash2, Lock, Users as UsersIcon, AlertTriangle } from 'lucide-react';
|
||||
|
||||
import { Button, Card, Loading } from '../common';
|
||||
import { useMutationWithToast } from '../../hooks';
|
||||
import { rolesService, type RoleWithPermissions } from '../../services/roles.service';
|
||||
import { RoleEditorModal, type RoleEditorSave } from './RoleEditorModal';
|
||||
|
||||
const getRoleBadgeColor = (roleName: string): string => {
|
||||
switch (roleName?.toLowerCase()) {
|
||||
case 'super_admin':
|
||||
return 'bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800';
|
||||
case 'admin':
|
||||
case 'solo_photographer':
|
||||
return 'bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800';
|
||||
case 'editor':
|
||||
return 'bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800';
|
||||
default:
|
||||
return 'bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 border-neutral-200 dark:border-neutral-600';
|
||||
}
|
||||
};
|
||||
|
||||
export const RoleManagementTab: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [editor, setEditor] = useState<{ mode: 'create' | 'edit'; role: RoleWithPermissions | null } | null>(null);
|
||||
const [deleteTarget, setDeleteTarget] = useState<RoleWithPermissions | null>(null);
|
||||
|
||||
const { data: roles, isLoading: rolesLoading } = useQuery({
|
||||
queryKey: ['admin-roles-full'],
|
||||
queryFn: rolesService.getRoles,
|
||||
});
|
||||
const { data: catalog, isLoading: catalogLoading } = useQuery({
|
||||
queryKey: ['admin-permission-catalog'],
|
||||
queryFn: rolesService.getPermissionCatalog,
|
||||
});
|
||||
|
||||
const invalidate: string[][] = [['admin-roles-full'], ['admin-roles']];
|
||||
|
||||
const createMutation = useMutationWithToast({
|
||||
mutationFn: (payload: RoleEditorSave) =>
|
||||
rolesService.createRole({
|
||||
name: payload.name!,
|
||||
displayName: payload.displayName,
|
||||
description: payload.description,
|
||||
permissions: payload.permissions,
|
||||
}),
|
||||
invalidateKeys: invalidate,
|
||||
successMessage: t('roleEditor.created', 'Role created'),
|
||||
errorMessage: (e: Error) => e.message || t('roleEditor.saveError', 'Failed to save role'),
|
||||
onSuccess: () => setEditor(null),
|
||||
});
|
||||
|
||||
const updateMutation = useMutationWithToast({
|
||||
mutationFn: ({ id, payload }: { id: number; payload: RoleEditorSave }) =>
|
||||
rolesService.updateRole(id, {
|
||||
displayName: payload.displayName,
|
||||
description: payload.description,
|
||||
permissions: payload.permissions,
|
||||
}),
|
||||
invalidateKeys: invalidate,
|
||||
successMessage: t('roleEditor.updated', 'Role updated'),
|
||||
errorMessage: (e: Error) => e.message || t('roleEditor.saveError', 'Failed to save role'),
|
||||
onSuccess: () => setEditor(null),
|
||||
});
|
||||
|
||||
const deleteMutation = useMutationWithToast({
|
||||
mutationFn: (id: number) => rolesService.deleteRole(id),
|
||||
invalidateKeys: invalidate,
|
||||
successMessage: t('roleEditor.deleted', 'Role deleted'),
|
||||
errorMessage: (e: Error) => e.message || t('roleEditor.deleteError', 'Failed to delete role'),
|
||||
onSuccess: () => setDeleteTarget(null),
|
||||
});
|
||||
|
||||
const handleSave = (payload: RoleEditorSave) => {
|
||||
if (editor?.mode === 'edit' && editor.role) {
|
||||
updateMutation.mutate({ id: editor.role.id, payload });
|
||||
} else {
|
||||
createMutation.mutate(payload);
|
||||
}
|
||||
};
|
||||
|
||||
if (rolesLoading || catalogLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[300px]">
|
||||
<Loading size="lg" text={t('roleEditor.loading', 'Loading roles…')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{t('roleEditor.subtitle', 'Define what each role can do. Start from a preset by cloning it, then trim or extend the permissions.')}
|
||||
</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
leftIcon={<Plus className="w-4 h-4" />}
|
||||
onClick={() => setEditor({ mode: 'create', role: null })}
|
||||
>
|
||||
{t('roleEditor.newRole', 'New role')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{(roles || []).map((role) => {
|
||||
const isSuperAdmin = role.name === 'super_admin';
|
||||
return (
|
||||
<Card key={role.id} padding="sm" className="flex flex-col">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium border ${getRoleBadgeColor(role.name)}`}>
|
||||
<Shield className="w-3 h-3" />
|
||||
{role.displayName}
|
||||
</span>
|
||||
{role.isSystem && (
|
||||
<span className="inline-flex items-center gap-1 text-[11px] text-neutral-400 dark:text-neutral-500">
|
||||
<Lock className="w-3 h-3" />
|
||||
{t('roleEditor.systemRole', 'System')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-1 text-xs font-mono text-neutral-400 dark:text-neutral-500">{role.name}</p>
|
||||
{role.description && (
|
||||
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400 line-clamp-2">{role.description}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mt-3 text-xs text-neutral-500 dark:text-neutral-400">
|
||||
<span>{t('roleEditor.permCount', '{{count}} permissions', { count: role.permissions.length })}</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<UsersIcon className="w-3.5 h-3.5" />
|
||||
{t('roleEditor.userCount', '{{count}} users', { count: role.userCount })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-3 pt-3 border-t border-neutral-100 dark:border-neutral-700">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
leftIcon={<Edit className="w-3.5 h-3.5" />}
|
||||
onClick={() => setEditor({ mode: 'edit', role })}
|
||||
>
|
||||
{isSuperAdmin ? t('roleEditor.view', 'View') : t('common.edit', 'Edit')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
leftIcon={<Copy className="w-3.5 h-3.5" />}
|
||||
onClick={() => setEditor({ mode: 'create', role: { ...role, displayName: `${role.displayName} copy` } })}
|
||||
>
|
||||
{t('roleEditor.clone', 'Clone')}
|
||||
</Button>
|
||||
{!role.isSystem && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
leftIcon={<Trash2 className="w-3.5 h-3.5" />}
|
||||
onClick={() => setDeleteTarget(role)}
|
||||
className="text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30"
|
||||
>
|
||||
{t('common.delete', 'Delete')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{editor && (
|
||||
<RoleEditorModal
|
||||
isOpen
|
||||
mode={editor.mode}
|
||||
role={editor.role}
|
||||
catalog={catalog || []}
|
||||
isLoading={createMutation.isPending || updateMutation.isPending}
|
||||
onClose={() => setEditor(null)}
|
||||
onSave={handleSave}
|
||||
/>
|
||||
)}
|
||||
|
||||
{deleteTarget && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<Card className="w-full max-w-md">
|
||||
<div className="p-6">
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<div className="p-2 rounded-full bg-red-100 dark:bg-red-900/40">
|
||||
<AlertTriangle className="w-5 h-5 text-red-600 dark:text-red-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{t('roleEditor.confirmDelete.title', 'Delete role?')}
|
||||
</h2>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
|
||||
{deleteTarget.userCount > 0
|
||||
? t('roleEditor.confirmDelete.hasUsers', 'Reassign the {{count}} user(s) holding "{{name}}" before deleting it.', { count: deleteTarget.userCount, name: deleteTarget.displayName })
|
||||
: t('roleEditor.confirmDelete.message', 'Permanently delete the "{{name}}" role? This cannot be undone.', { name: deleteTarget.displayName })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
<Button variant="outline" onClick={() => setDeleteTarget(null)} disabled={deleteMutation.isPending}>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => deleteMutation.mutate(deleteTarget.id)}
|
||||
isLoading={deleteMutation.isPending}
|
||||
disabled={deleteTarget.userCount > 0}
|
||||
className="bg-red-600 hover:bg-red-700 focus:ring-red-500"
|
||||
>
|
||||
{t('common.delete', 'Delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
RoleManagementTab.displayName = 'RoleManagementTab';
|
||||
@@ -10,7 +10,7 @@ import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import type { ReactElement } from 'react';
|
||||
import type { ReactElement, ReactNode } from 'react';
|
||||
|
||||
import { AdminPhotoGrid } from '../AdminPhotoGrid';
|
||||
import type { AdminPhoto } from '../../../services/photos.service';
|
||||
@@ -39,6 +39,13 @@ vi.mock('../../../services/photos.service', () => ({
|
||||
}
|
||||
}));
|
||||
|
||||
// AdminPhotoGrid now wraps its action buttons in PermissionGate (which needs a
|
||||
// PermissionsProvider). This test is about the layout toggle, not gating, so
|
||||
// stub the gate to a passthrough that always renders its children.
|
||||
vi.mock('../PermissionGate', () => ({
|
||||
PermissionGate: ({ children }: { children: ReactNode }) => <>{children}</>
|
||||
}));
|
||||
|
||||
const renderWithQueryClient = (ui: ReactElement) => {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } }
|
||||
|
||||
Reference in New Issue
Block a user