sprint12+13: zentrale rechte settings page + ABAC engine backend (model, migration 0055, service, routes)
This commit is contained in:
Agent Zero
@@ -0,0 +1,418 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { SettingsRolesPage } from './SettingsRoles';
|
||||
import { SettingsGroupsPage } from './SettingsGroups';
|
||||
import { useAllEntityPermissions, useEntityRegistry } from '@/api/entityPermissionHooks';
|
||||
import { useAuditLog, type AuditLogEntry } from '@/api/audit';
|
||||
import { usePermission } from '@/hooks/usePermission';
|
||||
import { Table, type TableColumn } from '@/components/ui/Table';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Select } from '@/components/ui/Select';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { Skeleton } from '@/components/ui/Skeleton';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { ConfirmDialog } from '@/components/ui/ConfirmDialog';
|
||||
import { apiDelete } from '@/api/client';
|
||||
import { Search, Trash2, Shield, Users, Share2, History } from 'lucide-react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
// ─── Types ─────────────────────────────────────────────────────────────────
|
||||
|
||||
interface EntityPermission {
|
||||
id: string;
|
||||
entity_type: string;
|
||||
entity_id: string;
|
||||
principal_type: string;
|
||||
principal_id: string;
|
||||
principal_name: string | null;
|
||||
permission_level: string;
|
||||
expires_at: string | null;
|
||||
created_by: string | null;
|
||||
created_at: string | null;
|
||||
}
|
||||
|
||||
interface EntityRegistryEntry {
|
||||
entity_type: string;
|
||||
display_name: string;
|
||||
description: string | null;
|
||||
}
|
||||
|
||||
// ─── Permission Level Badge ────────────────────────────────────────────────
|
||||
|
||||
function PermissionLevelBadge({ level }: { level: string }) {
|
||||
const colors: Record<string, string> = {
|
||||
read: 'bg-blue-100 text-blue-800',
|
||||
write: 'bg-yellow-100 text-yellow-800',
|
||||
admin: 'bg-purple-100 text-purple-800',
|
||||
delete: 'bg-red-100 text-red-800',
|
||||
owner: 'bg-green-100 text-green-800',
|
||||
};
|
||||
const labels: Record<string, string> = {
|
||||
read: 'Lesen',
|
||||
write: 'Schreiben',
|
||||
admin: 'Admin',
|
||||
delete: 'Löschen',
|
||||
owner: 'Besitzer',
|
||||
};
|
||||
return (
|
||||
<Badge className={colors[level] || 'bg-secondary-100 text-secondary-800'}>
|
||||
{labels[level] || level}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Principal Type Badge ────────────────────────────────────────────────────
|
||||
|
||||
function PrincipalTypeBadge({ type }: { type: string }) {
|
||||
const colors: Record<string, string> = {
|
||||
user: 'bg-cyan-100 text-cyan-800',
|
||||
group: 'bg-indigo-100 text-indigo-800',
|
||||
role: 'bg-amber-100 text-amber-800',
|
||||
};
|
||||
const labels: Record<string, string> = {
|
||||
user: 'Benutzer',
|
||||
group: 'Gruppe',
|
||||
role: 'Rolle',
|
||||
};
|
||||
return (
|
||||
<Badge className={colors[type] || 'bg-secondary-100 text-secondary-800'}>
|
||||
{labels[type] || type}
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Freigaben Tab ─────────────────────────────────────────────────────────
|
||||
|
||||
function FreigabenTab() {
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
const { hasPermission } = usePermission();
|
||||
const { data: permsData, isLoading: permsLoading, refetch: refetchPerms } = useAllEntityPermissions();
|
||||
const { data: registryData, isLoading: registryLoading } = useEntityRegistry();
|
||||
const [filterEntityType, setFilterEntityType] = useState('');
|
||||
const [filterPrincipal, setFilterPrincipal] = useState('');
|
||||
const [confirmDelete, setConfirmDelete] = useState<EntityPermission | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
const entityTypeMap = useMemo(() => {
|
||||
const map = new Map<string, string>();
|
||||
if (registryData) {
|
||||
for (const entry of registryData) {
|
||||
map.set(entry.entity_type, entry.display_name);
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}, [registryData]);
|
||||
|
||||
const entityTypeOptions = useMemo(() => {
|
||||
const types = new Set<string>();
|
||||
if (permsData?.items) {
|
||||
for (const p of permsData.items) {
|
||||
types.add(p.entity_type);
|
||||
}
|
||||
}
|
||||
return Array.from(types).sort().map((t) => ({
|
||||
value: t,
|
||||
label: entityTypeMap.get(t) || t,
|
||||
}));
|
||||
}, [permsData, entityTypeMap]);
|
||||
|
||||
const filteredPerms = useMemo(() => {
|
||||
if (!permsData?.items) return [];
|
||||
let items = permsData.items;
|
||||
if (filterEntityType) {
|
||||
items = items.filter((p) => p.entity_type === filterEntityType);
|
||||
}
|
||||
if (filterPrincipal) {
|
||||
const q = filterPrincipal.toLowerCase();
|
||||
items = items.filter(
|
||||
(p) =>
|
||||
(p.principal_name && p.principal_name.toLowerCase().includes(q)) ||
|
||||
p.principal_id.toLowerCase().includes(q)
|
||||
);
|
||||
}
|
||||
return items;
|
||||
}, [permsData, filterEntityType, filterPrincipal]);
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirmDelete) return;
|
||||
setDeleting(true);
|
||||
try {
|
||||
await apiDelete(`/permissions/${confirmDelete.entity_type}/${confirmDelete.entity_id}/${confirmDelete.id}`);
|
||||
toast.success('Berechtigung gelöscht');
|
||||
setConfirmDelete(null);
|
||||
refetchPerms();
|
||||
} catch (err: any) {
|
||||
toast.error(err.message || 'Fehler beim Löschen');
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const columns: TableColumn<EntityPermission>[] = [
|
||||
{
|
||||
key: 'entity_type',
|
||||
header: 'Entity-Typ',
|
||||
render: (row) => entityTypeMap.get(row.entity_type) || row.entity_type,
|
||||
},
|
||||
{ key: 'entity_id', header: 'Entity-ID', render: (row) => row.entity_id.slice(0, 8) + '…' },
|
||||
{
|
||||
key: 'principal_type',
|
||||
header: 'Principal',
|
||||
render: (row) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<PrincipalTypeBadge type={row.principal_type} />
|
||||
<span>{row.principal_name || row.principal_id.slice(0, 8) + '…'}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'permission_level',
|
||||
header: 'Berechtigungsstufe',
|
||||
render: (row) => <PermissionLevelBadge level={row.permission_level} />,
|
||||
},
|
||||
{
|
||||
key: 'expires_at',
|
||||
header: 'Läuft ab',
|
||||
render: (row) => {
|
||||
if (!row.expires_at) return '—';
|
||||
const expires = new Date(row.expires_at);
|
||||
const now = new Date();
|
||||
const isExpired = expires < now;
|
||||
return (
|
||||
<span className={isExpired ? 'text-danger-600' : ''}>
|
||||
{expires.toLocaleDateString('de-DE')}
|
||||
{isExpired && ' (abgelaufen)'}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
render: (row) =>
|
||||
hasPermission('settings:write') ? (
|
||||
<button
|
||||
onClick={() => setConfirmDelete(row)}
|
||||
className="p-1 rounded hover:bg-danger-50 text-danger-600"
|
||||
aria-label="Löschen"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
) : null,
|
||||
},
|
||||
];
|
||||
|
||||
if (permsLoading || registryLoading) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Skeleton className="h-10 w-full" />
|
||||
<Skeleton className="h-64 w-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card title="Freigaben Übersicht">
|
||||
<div className="flex gap-4 mb-4">
|
||||
<div className="w-64">
|
||||
<Select
|
||||
label="Entity-Typ filtern"
|
||||
options={[
|
||||
{ value: '', label: 'Alle' },
|
||||
...entityTypeOptions,
|
||||
]}
|
||||
value={filterEntityType}
|
||||
onChange={(e) => setFilterEntityType(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-64">
|
||||
<Input
|
||||
label="Nach Principal suchen"
|
||||
placeholder="Name oder ID..."
|
||||
value={filterPrincipal}
|
||||
onChange={(e) => setFilterPrincipal(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
data={filteredPerms}
|
||||
rowKey={(row) => row.id}
|
||||
emptyMessage="Keine Freigaben gefunden"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{confirmDelete && (
|
||||
<ConfirmDialog
|
||||
open={!!confirmDelete}
|
||||
onClose={() => setConfirmDelete(null)}
|
||||
onConfirm={handleDelete}
|
||||
title="Berechtigung löschen"
|
||||
message={`Soll die Berechtigung für ${entityTypeMap.get(confirmDelete.entity_type) || confirmDelete.entity_type} wirklich gelöscht werden?`}
|
||||
confirmLabel={deleting ? 'Wird gelöscht...' : 'Löschen'}
|
||||
variant="danger"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Audit Tab ─────────────────────────────────────────────────────────────
|
||||
|
||||
function AuditTab() {
|
||||
const { t } = useTranslation();
|
||||
const [page, setPage] = useState(1);
|
||||
const pageSize = 25;
|
||||
const { data, isLoading, isError, error } = useAuditLog(page, pageSize, {
|
||||
action: 'permission_grant,permission_revoke,permission_update',
|
||||
});
|
||||
|
||||
const columns: TableColumn<AuditLogEntry> = [
|
||||
{
|
||||
key: 'timestamp',
|
||||
header: 'Zeitpunkt',
|
||||
render: (row) => new Date(row.timestamp).toLocaleString('de-DE'),
|
||||
},
|
||||
{ key: 'user', header: 'Benutzer' },
|
||||
{
|
||||
key: 'action',
|
||||
header: 'Aktion',
|
||||
render: (row) => {
|
||||
const labels: Record<string, string> = {
|
||||
permission_grant: 'Freigabe erteilt',
|
||||
permission_revoke: 'Freigabe entzogen',
|
||||
permission_update: 'Freigabe geändert',
|
||||
};
|
||||
const colors: Record<string, string> = {
|
||||
permission_grant: 'bg-green-100 text-green-800',
|
||||
permission_revoke: 'bg-red-100 text-red-800',
|
||||
permission_update: 'bg-yellow-100 text-yellow-800',
|
||||
};
|
||||
return (
|
||||
<Badge className={colors[row.action] || 'bg-secondary-100 text-secondary-800'}>
|
||||
{labels[row.action] || row.action}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{ key: 'entity', header: 'Entity' },
|
||||
{
|
||||
key: 'details',
|
||||
header: 'Details',
|
||||
render: (row) => {
|
||||
if (!row.details) return '—';
|
||||
try {
|
||||
const parsed = JSON.parse(row.details);
|
||||
return (
|
||||
<span className="text-xs font-mono">
|
||||
{Object.entries(parsed).map(([k, v]) => `${k}: ${v}`).join(', ')}
|
||||
</span>
|
||||
);
|
||||
} catch {
|
||||
return <span className="text-xs">{row.details}</span>;
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const totalPages = data?.total ? Math.ceil(data.total / pageSize) : 1;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card title="Audit-Log für Berechtigungen">
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data?.items || []}
|
||||
rowKey={(row) => row.id}
|
||||
loading={isLoading}
|
||||
emptyMessage="Keine Audit-Einträge gefunden"
|
||||
/>
|
||||
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<span className="text-sm text-secondary-600">
|
||||
Seite {page} von {totalPages}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={page <= 1}
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
Zurück
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
disabled={page >= totalPages}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
>
|
||||
Weiter
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Page ──────────────────────────────────────────────────────────────
|
||||
|
||||
export function SettingsRechtePage() {
|
||||
const { t } = useTranslation();
|
||||
const { hasPermission } = usePermission();
|
||||
const [activeTab, setActiveTab] = useState('rollen');
|
||||
|
||||
const tabs = [
|
||||
{ key: 'rollen', label: 'Rollen', icon: Shield, permission: 'roles:read' },
|
||||
{ key: 'gruppen', label: 'Gruppen', icon: Users, permission: 'groups:read' },
|
||||
{ key: 'freigaben', label: 'Freigaben', icon: Share2, permission: 'settings:read' },
|
||||
{ key: 'audit', label: 'Audit', icon: History, permission: 'audit:read' },
|
||||
].filter((tab) => hasPermission(tab.permission));
|
||||
|
||||
return (
|
||||
<div className="space-y-6" data-testid="settings-rechte-page">
|
||||
<h1 className="text-2xl font-bold text-secondary-900">Rechteverwaltung</h1>
|
||||
|
||||
<div className="border-b border-secondary-200">
|
||||
<nav className="flex gap-4" role="tablist" aria-label="Rechteverwaltung Tabs">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
return (
|
||||
<button
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
role="tab"
|
||||
aria-selected={activeTab === tab.key}
|
||||
className={clsx(
|
||||
'flex items-center gap-2 px-4 py-2 text-sm font-medium border-b-2 transition-colors',
|
||||
activeTab === tab.key
|
||||
? 'border-primary-500 text-primary-700'
|
||||
: 'border-transparent text-secondary-600 hover:text-secondary-900 hover:border-secondary-300'
|
||||
)}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
{tab.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div role="tabpanel">
|
||||
{activeTab === 'rollen' && <SettingsRolesPage />}
|
||||
{activeTab === 'gruppen' && <SettingsGroupsPage />}
|
||||
{activeTab === 'freigaben' && <FreigabenTab />}
|
||||
{activeTab === 'audit' && <AuditTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user