feat(templates): UI fuer Berechtigungs-Vorlagen — Modul 6/16 des UI-Backlogs
Backend existierte vollstaendig (list mit entity_type-Filter, create, update, delete, apply — templates:read/write, seit Audit-Fix im Katalog), Frontend hatte 0% Abdeckung. - api/permissionTemplates.ts: TanStack-Hooks (usePermissionTemplates, create/update/delete/apply mit Cache-Invalidierung, TemplateLevel-Typ) - pages/PermissionTemplates.tsx: Template-Karten (Name, Level-Badge, Entity-Type, Auto-Share-Zusammenfassung), Create/Edit-Dialog mit Level-Select und JSON-Textarea inkl. Array-Validierung mit Fehlertext, Apply-Dialog (Entity-Type vorbelegt, Entity-ID), Ergebnis-Banner mit Anzahl erstellter Berechtigungen, Delete mit Confirm — alle Aktionen hinter templates:write gegated - Platzierung: Settings-Subpage /settings/permission-templates (statisch, Core-Route) + Settings-Nav-Item - i18n permissionTemplates.* de/en Verifikation: Vitest 10/10 (Rendering, Level-Badges, Create mit validem + invalidem JSON, Edit prefilled, Apply mit Ergebnis, Delete-Confirm, Permission-Gating, Empty/Error) · tsc exit 0 · production build exit 0.
This commit is contained in:
Agent Zero
@@ -0,0 +1,456 @@
|
||||
/**
|
||||
* Permission Templates settings page — reusable permission presets
|
||||
* (UI-Backlog module 6/16).
|
||||
*
|
||||
* Backend: /api/v1/permission-templates (list, create, update, delete,
|
||||
* apply). Applying a template creates entity_permissions entries from its
|
||||
* auto_share_with list.
|
||||
* Permissions: templates:read (list) / templates:write (CRUD + apply).
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
LayoutTemplate,
|
||||
Plus,
|
||||
Pencil,
|
||||
Trash2,
|
||||
Play,
|
||||
KeyRound,
|
||||
AlertTriangle,
|
||||
Inbox,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
usePermissionTemplates,
|
||||
useCreatePermissionTemplate,
|
||||
useUpdatePermissionTemplate,
|
||||
useDeletePermissionTemplate,
|
||||
useApplyPermissionTemplate,
|
||||
type PermissionTemplate,
|
||||
type TemplateLevel,
|
||||
type ShareEntry,
|
||||
} from '@/api/permissionTemplates';
|
||||
import { usePermission } from '@/hooks/usePermission';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { Select } from '@/components/ui/Select';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
|
||||
const LEVELS: { value: TemplateLevel; labelKey: string }[] = [
|
||||
{ value: 'read', labelKey: 'permissionTemplates.levelRead' },
|
||||
{ value: 'write', labelKey: 'permissionTemplates.levelWrite' },
|
||||
{ value: 'admin', labelKey: 'permissionTemplates.levelAdmin' },
|
||||
{ value: 'delete', labelKey: 'permissionTemplates.levelDelete' },
|
||||
];
|
||||
|
||||
const LEVEL_BADGE: Record<TemplateLevel, string> = {
|
||||
read: 'bg-secondary-200 text-secondary-800',
|
||||
write: 'bg-primary-100 text-primary-800',
|
||||
admin: 'bg-warning-100 text-warning-800',
|
||||
delete: 'bg-danger-100 text-danger-800',
|
||||
};
|
||||
|
||||
function summarizeShare(share: ShareEntry[] | null): string {
|
||||
if (!share || share.length === 0) return '—';
|
||||
return share
|
||||
.map((s) => `${s.principal_type ?? 'user'}:${(s.principal_id ?? '').slice(0, 8)} (${s.level ?? 'read'})`)
|
||||
.join(', ');
|
||||
}
|
||||
|
||||
function TemplateCard({
|
||||
template,
|
||||
canWrite,
|
||||
onEdit,
|
||||
onApply,
|
||||
onDelete,
|
||||
isMutating,
|
||||
}: {
|
||||
template: PermissionTemplate;
|
||||
canWrite: boolean;
|
||||
onEdit: (t: PermissionTemplate) => void;
|
||||
onApply: (t: PermissionTemplate) => void;
|
||||
onDelete: (t: PermissionTemplate) => void;
|
||||
isMutating: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Card className="p-4" data-testid={`template-card-${template.id}`}>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<LayoutTemplate className="w-4 h-4 text-primary-600 flex-shrink-0" aria-hidden="true" />
|
||||
<span className="text-sm font-medium text-secondary-900 dark:text-secondary-100">
|
||||
{template.name}
|
||||
</span>
|
||||
<span data-testid={`template-level-${template.id}`}>
|
||||
<Badge className={LEVEL_BADGE[template.level]}>
|
||||
{t(`permissionTemplates.level_${template.level}`)}
|
||||
</Badge>
|
||||
</span>
|
||||
<Badge variant="secondary">{template.entity_type}</Badge>
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-secondary-500 dark:text-secondary-400" data-testid={`template-share-${template.id}`}>
|
||||
{t('permissionTemplates.autoShareWith')}: {summarizeShare(template.auto_share_with)}
|
||||
</div>
|
||||
</div>
|
||||
{canWrite && (
|
||||
<div className="flex gap-2 flex-shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onApply(template)}
|
||||
disabled={isMutating}
|
||||
aria-label={t('permissionTemplates.apply')}
|
||||
data-testid={`template-apply-${template.id}`}
|
||||
>
|
||||
<Play className="w-4 h-4" aria-hidden="true" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onEdit(template)}
|
||||
disabled={isMutating}
|
||||
aria-label={t('permissionTemplates.edit')}
|
||||
data-testid={`template-edit-${template.id}`}
|
||||
>
|
||||
<Pencil className="w-4 h-4" aria-hidden="true" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onDelete(template)}
|
||||
disabled={isMutating}
|
||||
aria-label={t('permissionTemplates.delete')}
|
||||
data-testid={`template-delete-${template.id}`}
|
||||
className="text-danger-600 hover:text-danger-700"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" aria-hidden="true" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function TemplateFormDialog({
|
||||
open,
|
||||
template,
|
||||
onClose,
|
||||
onSubmit,
|
||||
isSubmitting,
|
||||
}: {
|
||||
open: boolean;
|
||||
template: PermissionTemplate | null;
|
||||
onClose: () => void;
|
||||
onSubmit: (payload: {
|
||||
name: string;
|
||||
entity_type: string;
|
||||
level: TemplateLevel;
|
||||
auto_share_with?: ShareEntry[] | null;
|
||||
}) => void;
|
||||
isSubmitting: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [name, setName] = useState(template?.name ?? '');
|
||||
const [entityType, setEntityType] = useState(template?.entity_type ?? '');
|
||||
const [level, setLevel] = useState<TemplateLevel>(template?.level ?? 'read');
|
||||
const [shareJson, setShareJson] = useState(
|
||||
template?.auto_share_with ? JSON.stringify(template.auto_share_with, null, 2) : '',
|
||||
);
|
||||
const [jsonError, setJsonError] = useState<string | null>(null);
|
||||
|
||||
// Reset on open (template may change between open/edit)
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
setName(template?.name ?? '');
|
||||
setEntityType(template?.entity_type ?? '');
|
||||
setLevel(template?.level ?? 'read');
|
||||
setShareJson(template?.auto_share_with ? JSON.stringify(template.auto_share_with, null, 2) : '');
|
||||
setJsonError(null);
|
||||
}
|
||||
}, [open, template]);
|
||||
|
||||
const parsedShare = (): ShareEntry[] | null | undefined => {
|
||||
if (!shareJson.trim()) return null;
|
||||
try {
|
||||
const parsed = JSON.parse(shareJson);
|
||||
if (!Array.isArray(parsed)) {
|
||||
setJsonError(t('permissionTemplates.jsonMustBeArray'));
|
||||
return undefined;
|
||||
}
|
||||
setJsonError(null);
|
||||
return parsed as ShareEntry[];
|
||||
} catch {
|
||||
setJsonError(t('permissionTemplates.jsonInvalid'));
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
const valid = name.trim().length > 0 && entityType.trim().length > 0;
|
||||
|
||||
const submit = () => {
|
||||
if (!valid) return;
|
||||
const share = parsedShare();
|
||||
if (share === undefined) return;
|
||||
onSubmit({ name: name.trim(), entity_type: entityType.trim(), level, auto_share_with: share });
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title={template ? t('permissionTemplates.editTitle') : t('permissionTemplates.createTitle')}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
label={t('permissionTemplates.name')}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
placeholder={t('permissionTemplates.namePlaceholder')}
|
||||
/>
|
||||
<Input
|
||||
label={t('permissionTemplates.entityType')}
|
||||
value={entityType}
|
||||
onChange={(e) => setEntityType(e.target.value)}
|
||||
required
|
||||
placeholder={t('permissionTemplates.entityTypePlaceholder')}
|
||||
/>
|
||||
<Select
|
||||
label={t('permissionTemplates.level')}
|
||||
options={LEVELS.map((l) => ({ value: l.value, label: t(l.labelKey) }))}
|
||||
value={level}
|
||||
onChange={(e) => setLevel(e.target.value as TemplateLevel)}
|
||||
required
|
||||
/>
|
||||
<div>
|
||||
<label htmlFor="pt-share-json" className="block text-sm font-medium text-secondary-700 mb-1">
|
||||
{t('permissionTemplates.autoShareJson')}
|
||||
</label>
|
||||
<textarea
|
||||
id="pt-share-json"
|
||||
value={shareJson}
|
||||
onChange={(e) => setShareJson(e.target.value)}
|
||||
rows={4}
|
||||
className="block w-full rounded-md border border-secondary-300 px-3 py-2 text-xs font-mono min-h-touch"
|
||||
placeholder='[{"principal_type": "user", "principal_id": "<uuid>", "level": "read"}]'
|
||||
aria-label={t('permissionTemplates.autoShareJson')}
|
||||
data-testid="template-share-json"
|
||||
/>
|
||||
<p className={`mt-1 text-xs ${jsonError ? 'text-danger-600' : 'text-secondary-500'}`} role={jsonError ? 'alert' : undefined}>
|
||||
{jsonError ?? t('permissionTemplates.autoShareHelper')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button variant="ghost" onClick={onClose}>{t('common.cancel')}</Button>
|
||||
<Button onClick={submit} disabled={!valid || isSubmitting} data-testid="template-form-submit">
|
||||
{template ? t('permissionTemplates.save') : t('permissionTemplates.createSubmit')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function ApplyDialog({
|
||||
open,
|
||||
template,
|
||||
onClose,
|
||||
onSubmit,
|
||||
isSubmitting,
|
||||
}: {
|
||||
open: boolean;
|
||||
template: PermissionTemplate | null;
|
||||
onClose: () => void;
|
||||
onSubmit: (payload: { entity_type: string; entity_id: string; template_id: string }) => void;
|
||||
isSubmitting: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [entityId, setEntityId] = useState('');
|
||||
const [entityType, setEntityType] = useState('');
|
||||
|
||||
React.useEffect(() => {
|
||||
if (open && template) {
|
||||
setEntityType(template.entity_type);
|
||||
setEntityId('');
|
||||
}
|
||||
}, [open, template]);
|
||||
|
||||
const valid = entityId.trim().length > 0 && entityType.trim().length > 0;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title={t('permissionTemplates.applyTitle', { name: template?.name ?? '' })}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
label={t('permissionTemplates.entityType')}
|
||||
value={entityType}
|
||||
onChange={(e) => setEntityType(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
label={t('permissionTemplates.entityId')}
|
||||
value={entityId}
|
||||
onChange={(e) => setEntityId(e.target.value)}
|
||||
required
|
||||
placeholder="00000000-0000-0000-0000-000000000000"
|
||||
/>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button variant="ghost" onClick={onClose}>{t('common.cancel')}</Button>
|
||||
<Button onClick={() => valid && onSubmit({ entity_type: entityType.trim(), entity_id: entityId.trim(), template_id: template!.id })} disabled={!valid || isSubmitting} data-testid="template-apply-submit">
|
||||
{t('permissionTemplates.applySubmit')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export function PermissionTemplatesPage() {
|
||||
const { t } = useTranslation();
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [editTemplate, setEditTemplate] = useState<PermissionTemplate | null>(null);
|
||||
const [applyTemplate, setApplyTemplate] = useState<PermissionTemplate | null>(null);
|
||||
const [resultMessage, setResultMessage] = useState<string | null>(null);
|
||||
|
||||
const { data, isLoading, isError } = usePermissionTemplates();
|
||||
const createMut = useCreatePermissionTemplate();
|
||||
const updateMut = useUpdatePermissionTemplate();
|
||||
const deleteMut = useDeletePermissionTemplate();
|
||||
const applyMut = useApplyPermissionTemplate();
|
||||
const { hasPermission } = usePermission();
|
||||
|
||||
const canWrite = hasPermission('templates:write');
|
||||
const isMutating = createMut.isPending || updateMut.isPending || deleteMut.isPending || applyMut.isPending;
|
||||
|
||||
const handleCreate = (payload: { name: string; entity_type: string; level: TemplateLevel; auto_share_with?: ShareEntry[] | null }) => {
|
||||
createMut.mutate(payload, {
|
||||
onSuccess: () => {
|
||||
setShowCreate(false);
|
||||
setResultMessage(null);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleEdit = (payload: { name: string; entity_type: string; level: TemplateLevel; auto_share_with?: ShareEntry[] | null }) => {
|
||||
if (!editTemplate) return;
|
||||
updateMut.mutate(
|
||||
{ templateId: editTemplate.id, payload },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setEditTemplate(null);
|
||||
setResultMessage(null);
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const handleDelete = (template: PermissionTemplate) => {
|
||||
if (window.confirm(t('permissionTemplates.deleteConfirm', { name: template.name }))) {
|
||||
deleteMut.mutate(template.id);
|
||||
}
|
||||
};
|
||||
|
||||
const handleApply = (payload: { entity_type: string; entity_id: string; template_id: string }) => {
|
||||
applyMut.mutate(payload, {
|
||||
onSuccess: (result) => {
|
||||
setApplyTemplate(null);
|
||||
setResultMessage(t('permissionTemplates.appliedCount', { count: result.count }));
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const items = data?.items ?? [];
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-4 sm:p-6 space-y-4" data-testid="permission-templates-page">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<KeyRound className="w-6 h-6 text-primary-600" aria-hidden="true" />
|
||||
<h1 className="text-2xl font-bold text-secondary-900 dark:text-secondary-100">
|
||||
{t('permissionTemplates.title')}
|
||||
</h1>
|
||||
</div>
|
||||
{canWrite && (
|
||||
<Button onClick={() => setShowCreate(true)} data-testid="template-create-open">
|
||||
<Plus className="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
{t('permissionTemplates.create')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{resultMessage && (
|
||||
<div role="status">
|
||||
<Card className="p-3 text-sm text-success-700" data-testid="templates-result">
|
||||
{resultMessage}
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center min-h-[30vh]" role="status" data-testid="templates-loading">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500" aria-hidden="true" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isError && (
|
||||
<Card className="p-6 flex items-center gap-3 text-danger-600" data-testid="templates-error">
|
||||
<AlertTriangle className="w-5 h-5" aria-hidden="true" />
|
||||
<span>{t('permissionTemplates.loadError')}</span>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && items.length === 0 && (
|
||||
<Card className="p-8 flex flex-col items-center gap-3 text-secondary-500" data-testid="templates-empty">
|
||||
<Inbox className="w-10 h-10" aria-hidden="true" />
|
||||
<p>{t('permissionTemplates.empty')}</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
{items.map((template) => (
|
||||
<TemplateCard
|
||||
key={template.id}
|
||||
template={template}
|
||||
canWrite={canWrite}
|
||||
onEdit={setEditTemplate}
|
||||
onApply={setApplyTemplate}
|
||||
onDelete={handleDelete}
|
||||
isMutating={isMutating}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<TemplateFormDialog
|
||||
open={showCreate}
|
||||
template={null}
|
||||
onClose={() => setShowCreate(false)}
|
||||
onSubmit={handleCreate}
|
||||
isSubmitting={createMut.isPending}
|
||||
/>
|
||||
<TemplateFormDialog
|
||||
open={!!editTemplate}
|
||||
template={editTemplate}
|
||||
onClose={() => setEditTemplate(null)}
|
||||
onSubmit={handleEdit}
|
||||
isSubmitting={updateMut.isPending}
|
||||
/>
|
||||
<ApplyDialog
|
||||
open={!!applyTemplate}
|
||||
template={applyTemplate}
|
||||
onClose={() => setApplyTemplate(null)}
|
||||
onSubmit={handleApply}
|
||||
isSubmitting={applyMut.isPending}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PermissionTemplatesPage;
|
||||
@@ -50,6 +50,7 @@ export function SettingsPage() {
|
||||
{ to: '/settings/backup', label: 'Backup & Restore', icon: '\ud83d\udcbe' },
|
||||
{ to: '/settings/api-tokens', label: 'API-Tokens', icon: '\ud83d\udd11' },
|
||||
{ to: '/settings/tenants', label: 'Mandanten', icon: '\ud83c\udfe2' },
|
||||
{ to: '/settings/permission-templates', label: 'Berechtigungs-Vorlagen', icon: '\ud83d\udd11' },
|
||||
];
|
||||
|
||||
const existingPaths = new Set(hardcodedNavItems.map(item => item.to));
|
||||
|
||||
Reference in New Issue
Block a user