feat(tenants): UI fuer Mandanten-Verwaltung — Modul 4/16 des UI-Backlogs
Backend existierte vollstaendig (list, create, list users, assign user; tenants:read/write), Frontend hatte 0% Abdeckung. - api/tenants.ts: TanStack-Hooks (useTenants, useTenantUsers mit enabled-Gating, create, assignUser mit Cache-Invalidierung) - pages/Tenants.tsx: Tenant-Karten (Name, Slug, Standard-Badge), expandierbare User-Liste pro Tenant (Rolle, E-Mail), Create-Dialog (Name + Slug mit Auto-Normalisierung), Assign-User-Dialog mit User-Picker (bereits zugewiesene gefiltert) — Create/Users/Assign hinter tenants:write gegated - Platzierung: Settings-Subpage /settings/tenants (statisch, Core-Route) + Settings-Nav-Item - i18n tenants.* de/en Verifikation: Vitest 8/8 (Rendering, Standard-Badge, Expand-User-Liste, Create-Flow, Assign-Flow, Permission-Gating, Empty/Error) · tsc exit 0 · production build exit 0.
This commit is contained in:
Agent Zero
@@ -49,6 +49,7 @@ export function SettingsPage() {
|
||||
{ to: '/settings/workspaces', label: 'Workspaces', icon: '\ud83d\udd58\ufe0f' },
|
||||
{ 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' },
|
||||
];
|
||||
|
||||
const existingPaths = new Set(hardcodedNavItems.map(item => item.to));
|
||||
|
||||
@@ -0,0 +1,331 @@
|
||||
/**
|
||||
* Tenants settings page — multi-tenant management (UI-Backlog module 4/16).
|
||||
*
|
||||
* Backend: /api/v1/tenants (list, create, list users, assign user).
|
||||
* Permissions: tenants:read (list) / tenants:write (create, users, assign).
|
||||
*/
|
||||
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Building2,
|
||||
Plus,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
UserPlus,
|
||||
AlertTriangle,
|
||||
Inbox,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
useTenants,
|
||||
useTenantUsers,
|
||||
useCreateTenant,
|
||||
useAssignUserToTenant,
|
||||
type Tenant,
|
||||
} from '@/api/tenants';
|
||||
import { useUsers } from '@/api/users';
|
||||
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';
|
||||
|
||||
function TenantCard({
|
||||
tenant,
|
||||
canWrite,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
}: {
|
||||
tenant: Tenant;
|
||||
canWrite: boolean;
|
||||
isExpanded: boolean;
|
||||
onToggle: (tenant: Tenant) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { data: usersData, isLoading: usersLoading } = useTenantUsers(
|
||||
canWrite && isExpanded ? tenant.id : null,
|
||||
);
|
||||
|
||||
return (
|
||||
<Card className="p-4" data-testid={`tenant-card-${tenant.id}`}>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2 min-w-0 flex-1 flex-wrap">
|
||||
<Building2 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">
|
||||
{tenant.name}
|
||||
</span>
|
||||
<span className="text-xs text-secondary-500">{tenant.slug}</span>
|
||||
{tenant.is_default && (
|
||||
<Badge variant="primary">{t('tenants.defaultBadge')}</Badge>
|
||||
)}
|
||||
</div>
|
||||
{canWrite && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => onToggle(tenant)}
|
||||
aria-expanded={isExpanded}
|
||||
aria-label={t('tenants.users')}
|
||||
data-testid={`tenant-users-toggle-${tenant.id}`}
|
||||
>
|
||||
{isExpanded
|
||||
? <ChevronDown className="w-4 h-4" aria-hidden="true" />
|
||||
: <ChevronRight className="w-4 h-4" aria-hidden="true" />}
|
||||
<span className="text-xs ml-1">{t('tenants.users')}</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{canWrite && isExpanded && (
|
||||
<div className="mt-3 border-t border-secondary-200 dark:border-secondary-700 pt-3">
|
||||
{usersLoading && (
|
||||
<div className="text-xs text-secondary-500" data-testid={`tenant-users-loading-${tenant.id}`}>
|
||||
{t('tenants.loadingUsers')}
|
||||
</div>
|
||||
)}
|
||||
<ul className="space-y-1" data-testid={`tenant-users-list-${tenant.id}`}>
|
||||
{(usersData?.items ?? []).map((u) => (
|
||||
<li
|
||||
key={u.id}
|
||||
className="flex items-center justify-between gap-2 text-sm"
|
||||
data-testid={`tenant-user-${tenant.id}-${u.id}`}
|
||||
>
|
||||
<span className="truncate">
|
||||
{u.name} <span className="text-secondary-400">({u.email})</span>
|
||||
</span>
|
||||
<span className="flex items-center gap-1 flex-shrink-0">
|
||||
<Badge variant="secondary">{u.role}</Badge>
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateTenantDialog({
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
isSubmitting,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (payload: { name: string; slug: string }) => void;
|
||||
isSubmitting: boolean;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [name, setName] = useState('');
|
||||
const [slug, setSlug] = useState('');
|
||||
|
||||
const valid = name.trim().length > 0 && slug.trim().length > 0;
|
||||
|
||||
const submit = () => {
|
||||
if (!valid) return;
|
||||
onSubmit({ name: name.trim(), slug: slug.trim() });
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose} title={t('tenants.createTitle')}>
|
||||
<div className="space-y-4">
|
||||
<Input
|
||||
label={t('tenants.name')}
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
required
|
||||
placeholder={t('tenants.namePlaceholder')}
|
||||
/>
|
||||
<Input
|
||||
label={t('tenants.slug')}
|
||||
value={slug}
|
||||
onChange={(e) => setSlug(e.target.value.replace(/\s+/g, '-').toLowerCase())}
|
||||
required
|
||||
placeholder={t('tenants.slugPlaceholder')}
|
||||
helperText={t('tenants.slugHelper')}
|
||||
/>
|
||||
<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="tenant-create-submit">
|
||||
{t('tenants.createSubmit')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
function AssignUserDialog({
|
||||
tenant,
|
||||
open,
|
||||
onClose,
|
||||
onSubmit,
|
||||
isSubmitting,
|
||||
existingUserIds,
|
||||
}: {
|
||||
tenant: Tenant | null;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSubmit: (userId: string) => void;
|
||||
isSubmitting: boolean;
|
||||
existingUserIds: Set<string>;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [userId, setUserId] = useState('');
|
||||
const { data: usersData } = useUsers(1, 100);
|
||||
|
||||
const userOptions = useMemo(
|
||||
() =>
|
||||
(usersData?.items ?? [])
|
||||
.filter((u) => !existingUserIds.has(u.id))
|
||||
.map((u) => ({ value: u.id, label: `${u.name} (${u.email})` })),
|
||||
[usersData, existingUserIds],
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal open={open} onClose={onClose} title={t('tenants.assignTitle', { name: tenant?.name ?? '' })}>
|
||||
<div className="space-y-4">
|
||||
<Select
|
||||
label={t('tenants.user')}
|
||||
options={userOptions}
|
||||
value={userId}
|
||||
onChange={(e) => setUserId(e.target.value)}
|
||||
required
|
||||
placeholder={t('tenants.userPlaceholder')}
|
||||
/>
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button variant="ghost" onClick={onClose}>{t('common.cancel')}</Button>
|
||||
<Button onClick={() => userId && onSubmit(userId)} disabled={!userId || isSubmitting} data-testid="tenant-assign-submit">
|
||||
{t('tenants.assignSubmit')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export function TenantsPage() {
|
||||
const { t } = useTranslation();
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [expandedId, setExpandedId] = useState<string | null>(null);
|
||||
const [assignTenant, setAssignTenant] = useState<Tenant | null>(null);
|
||||
const { data, isLoading, isError } = useTenants();
|
||||
const createMut = useCreateTenant();
|
||||
const assignMut = useAssignUserToTenant();
|
||||
const { hasPermission } = usePermission();
|
||||
const { data: tenantUsersData } = useTenantUsers(
|
||||
expandedId && hasPermission('tenants:write') ? expandedId : null,
|
||||
);
|
||||
|
||||
const canWrite = hasPermission('tenants:write');
|
||||
const isMutating = createMut.isPending || assignMut.isPending;
|
||||
|
||||
const handleCreate = (payload: { name: string; slug: string }) => {
|
||||
createMut.mutate(payload, {
|
||||
onSuccess: () => setShowCreate(false),
|
||||
});
|
||||
};
|
||||
|
||||
const handleAssign = (userId: string) => {
|
||||
if (!assignTenant) return;
|
||||
assignMut.mutate(
|
||||
{ tenantId: assignTenant.id, userId },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setAssignTenant(null);
|
||||
// Keep the expanded panel fresh
|
||||
setExpandedId(assignTenant.id);
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
const items = data?.items ?? [];
|
||||
const existingUserIds = useMemo(
|
||||
() => new Set((tenantUsersData?.items ?? []).map((u) => u.id)),
|
||||
[tenantUsersData],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-4 sm:p-6 space-y-4" data-testid="tenants-page">
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h1 className="text-2xl font-bold text-secondary-900 dark:text-secondary-100">
|
||||
{t('tenants.title')}
|
||||
</h1>
|
||||
{canWrite && (
|
||||
<div className="flex gap-2">
|
||||
{expandedId && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
const tenant = items.find((x) => x.id === expandedId);
|
||||
if (tenant) setAssignTenant(tenant);
|
||||
}}
|
||||
data-testid="tenant-assign-open"
|
||||
>
|
||||
<UserPlus className="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
{t('tenants.assign')}
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={() => setShowCreate(true)} data-testid="tenant-create-open">
|
||||
<Plus className="w-4 h-4 mr-2" aria-hidden="true" />
|
||||
{t('tenants.create')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center min-h-[30vh]" role="status" data-testid="tenants-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="tenants-error">
|
||||
<AlertTriangle className="w-5 h-5" aria-hidden="true" />
|
||||
<span>{t('tenants.loadError')}</span>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && items.length === 0 && (
|
||||
<Card className="p-8 flex flex-col items-center gap-3 text-secondary-500" data-testid="tenants-empty">
|
||||
<Inbox className="w-10 h-10" aria-hidden="true" />
|
||||
<p>{t('tenants.empty')}</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
{items.map((tenant) => (
|
||||
<TenantCard
|
||||
key={tenant.id}
|
||||
tenant={tenant}
|
||||
canWrite={canWrite}
|
||||
isExpanded={expandedId === tenant.id}
|
||||
onToggle={(x) => setExpandedId(expandedId === x.id ? null : x.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<CreateTenantDialog
|
||||
open={showCreate}
|
||||
onClose={() => setShowCreate(false)}
|
||||
onSubmit={handleCreate}
|
||||
isSubmitting={createMut.isPending}
|
||||
/>
|
||||
<AssignUserDialog
|
||||
tenant={assignTenant}
|
||||
open={!!assignTenant}
|
||||
onClose={() => setAssignTenant(null)}
|
||||
onSubmit={handleAssign}
|
||||
isSubmitting={assignMut.isPending}
|
||||
existingUserIds={existingUserIds}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TenantsPage;
|
||||
Reference in New Issue
Block a user