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
@@ -0,0 +1,194 @@
|
||||
/**
|
||||
* Tenants page tests — multi-tenant management (module 4/16).
|
||||
*
|
||||
* Covers: rendering, tenant cards with default badge, expandable user list,
|
||||
* create dialog, assign user flow, permission gating (tenants:write),
|
||||
* empty and error states.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { TenantsPage } from '@/pages/Tenants';
|
||||
import type { Tenant } from '@/api/tenants';
|
||||
import type { UserResponse } from '@/api/users';
|
||||
|
||||
const createMut = vi.fn().mockImplementation((_payload, opts) => {
|
||||
opts?.onSuccess?.({});
|
||||
return Promise.resolve({});
|
||||
});
|
||||
const assignMut = vi.fn().mockImplementation((_payload, opts) => {
|
||||
opts?.onSuccess?.({ message: 'ok' });
|
||||
return Promise.resolve({});
|
||||
});
|
||||
|
||||
const makeTenant = (overrides: Partial<Tenant> = {}): Tenant => ({
|
||||
id: 'tn-1',
|
||||
name: 'Default Org',
|
||||
slug: 'default-org',
|
||||
is_default: true,
|
||||
...overrides,
|
||||
});
|
||||
|
||||
const TENANT_USER = {
|
||||
id: '11111111-1111-1111-1111-111111111111',
|
||||
email: 'admin@example.com',
|
||||
name: 'Administrator',
|
||||
role: 'admin',
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
const ALL_USER: UserResponse = {
|
||||
id: '22222222-2222-2222-2222-222222222222',
|
||||
email: 'other@example.com',
|
||||
name: 'Other User',
|
||||
first_name: null,
|
||||
last_name: null,
|
||||
avatar_url: null,
|
||||
role: 'viewer',
|
||||
role_id: null,
|
||||
is_active: true,
|
||||
tenant_id: 'tn-1',
|
||||
};
|
||||
|
||||
let mockTenants: Tenant[] = [];
|
||||
let mockTenantUsers: typeof TENANT_USER[] = [];
|
||||
let mockCanWrite = true;
|
||||
let mockError = false;
|
||||
|
||||
vi.mock('@/api/tenants', () => ({
|
||||
useTenants: () => ({
|
||||
data: { items: mockTenants },
|
||||
isLoading: false,
|
||||
isError: mockError,
|
||||
isFetching: false,
|
||||
refetch: vi.fn(),
|
||||
}),
|
||||
useTenantUsers: (tenantId: string | null) => ({
|
||||
data: tenantId ? { items: mockTenantUsers } : undefined,
|
||||
isLoading: false,
|
||||
}),
|
||||
useCreateTenant: () => ({
|
||||
mutate: createMut,
|
||||
isPending: false,
|
||||
}),
|
||||
useAssignUserToTenant: () => ({
|
||||
mutate: assignMut,
|
||||
isPending: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('@/api/users', () => ({
|
||||
useUsers: () => ({
|
||||
data: { items: [ALL_USER], total: 1, page: 1, page_size: 100 },
|
||||
isLoading: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('@/hooks/usePermission', () => ({
|
||||
usePermission: () => ({
|
||||
hasPermission: (perm: string) => mockCanWrite || perm !== 'tenants:write',
|
||||
}),
|
||||
}));
|
||||
|
||||
function renderPage() {
|
||||
return render(
|
||||
<MemoryRouter>
|
||||
<TenantsPage />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockTenants = [];
|
||||
mockTenantUsers = [];
|
||||
mockCanWrite = true;
|
||||
mockError = false;
|
||||
});
|
||||
|
||||
describe('TenantsPage', () => {
|
||||
it('renders the page with title', () => {
|
||||
renderPage();
|
||||
expect(screen.getByTestId('tenants-page')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows empty state when no tenants exist', () => {
|
||||
renderPage();
|
||||
expect(screen.getByTestId('tenants-empty')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows error state on load failure', () => {
|
||||
mockError = true;
|
||||
renderPage();
|
||||
expect(screen.getByTestId('tenants-error')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders tenant cards with name, slug and default badge', () => {
|
||||
mockTenants = [makeTenant()];
|
||||
renderPage();
|
||||
expect(screen.getByTestId('tenant-card-tn-1')).toBeInTheDocument();
|
||||
expect(screen.getByText('Default Org')).toBeInTheDocument();
|
||||
expect(screen.getByText('default-org')).toBeInTheDocument();
|
||||
// Default badge — 'Standard' appears exactly once (the tenant name
|
||||
// 'Default Org' would also match a /default/i regex, so match exactly)
|
||||
expect(screen.getByText(/^standard$/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('expands the user list via the toggle', async () => {
|
||||
mockTenants = [makeTenant()];
|
||||
mockTenantUsers = [TENANT_USER];
|
||||
renderPage();
|
||||
fireEvent.click(screen.getByTestId('tenant-users-toggle-tn-1'));
|
||||
expect(await screen.findByTestId('tenant-users-list-tn-1')).toBeInTheDocument();
|
||||
expect(screen.getByTestId(`tenant-user-tn-1-${TENANT_USER.id}`)).toBeInTheDocument();
|
||||
expect(screen.getByText('Administrator')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('creates a tenant via the dialog', async () => {
|
||||
renderPage();
|
||||
fireEvent.click(screen.getByTestId('tenant-create-open'));
|
||||
expect(screen.getByTestId('tenant-create-submit')).toBeInTheDocument();
|
||||
|
||||
const nameInput = screen.getByLabelText(/name/i, { selector: 'input' }) as HTMLInputElement;
|
||||
fireEvent.change(nameInput, { target: { value: 'Zweite Firma' } });
|
||||
const slugInput = screen.getByLabelText(/slug/i, { selector: 'input' }) as HTMLInputElement;
|
||||
fireEvent.change(slugInput, { target: { value: 'zweite-firma' } });
|
||||
|
||||
fireEvent.click(screen.getByTestId('tenant-create-submit'));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(createMut).toHaveBeenCalledWith(
|
||||
{ name: 'Zweite Firma', slug: 'zweite-firma' },
|
||||
expect.anything(),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it('hides create and toggles without tenants:write', () => {
|
||||
mockTenants = [makeTenant()];
|
||||
mockCanWrite = false;
|
||||
renderPage();
|
||||
expect(screen.queryByTestId('tenant-create-open')).not.toBeInTheDocument();
|
||||
expect(screen.queryByTestId('tenant-users-toggle-tn-1')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('assigns a user to the expanded tenant', async () => {
|
||||
mockTenants = [makeTenant()];
|
||||
mockTenantUsers = [TENANT_USER];
|
||||
renderPage();
|
||||
fireEvent.click(screen.getByTestId('tenant-users-toggle-tn-1'));
|
||||
fireEvent.click(await screen.findByTestId('tenant-assign-open'));
|
||||
|
||||
const select = screen.getByRole('combobox');
|
||||
fireEvent.change(select, { target: { value: ALL_USER.id } });
|
||||
fireEvent.click(screen.getByTestId('tenant-assign-submit'));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(assignMut).toHaveBeenCalledWith(
|
||||
{ tenantId: 'tn-1', userId: ALL_USER.id },
|
||||
expect.anything(),
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,85 @@
|
||||
/**
|
||||
* Tenants API client — multi-tenant management.
|
||||
*
|
||||
* Backend: /api/v1/tenants (list, create, list users, assign user).
|
||||
* Permissions: tenants:read (list) / tenants:write (create, users, assign).
|
||||
*/
|
||||
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { apiGet, apiPost } from '@/api/client';
|
||||
|
||||
export interface Tenant {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
is_default: boolean;
|
||||
}
|
||||
|
||||
export interface TenantListResponse {
|
||||
items: Tenant[];
|
||||
}
|
||||
|
||||
export interface TenantUser {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
role: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
export interface TenantUsersResponse {
|
||||
items: TenantUser[];
|
||||
}
|
||||
|
||||
export interface TenantCreatePayload {
|
||||
name: string;
|
||||
slug: string;
|
||||
}
|
||||
|
||||
// ─── Query hooks ─────────────────────────────────────────────
|
||||
|
||||
export function useTenants() {
|
||||
return useQuery<TenantListResponse>({
|
||||
queryKey: ['tenants'],
|
||||
queryFn: () => apiGet<TenantListResponse>('/tenants'),
|
||||
});
|
||||
}
|
||||
|
||||
export function useTenantUsers(tenantId: string | null) {
|
||||
return useQuery<TenantUsersResponse>({
|
||||
queryKey: ['tenants', tenantId, 'users'],
|
||||
queryFn: () => apiGet<TenantUsersResponse>(`/tenants/${tenantId}/users`),
|
||||
enabled: !!tenantId,
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Mutation hooks ──────────────────────────────────────────
|
||||
|
||||
export function useCreateTenant() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation<
|
||||
{ id: string; name: string; slug: string },
|
||||
Error,
|
||||
TenantCreatePayload
|
||||
>({
|
||||
mutationFn: (data) => apiPost('/tenants', data),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['tenants'] });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useAssignUserToTenant() {
|
||||
const qc = useQueryClient();
|
||||
return useMutation<
|
||||
{ message: string },
|
||||
Error,
|
||||
{ tenantId: string; userId: string }
|
||||
>({
|
||||
mutationFn: ({ tenantId, userId }) =>
|
||||
apiPost(`/tenants/${tenantId}/users`, { user_id: userId }),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['tenants'] });
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -1684,5 +1684,26 @@
|
||||
"revokeConfirm": "Token '{{name}}' wirklich widerrufen? Anwendungen damit verlieren sofort den Zugriff.",
|
||||
"empty": "Keine API-Tokens vorhanden.",
|
||||
"loadError": "API-Tokens konnten nicht geladen werden."
|
||||
},
|
||||
"tenants": {
|
||||
"title": "Mandanten",
|
||||
"create": "Mandant erstellen",
|
||||
"createTitle": "Neuen Mandanten erstellen",
|
||||
"createSubmit": "Erstellen",
|
||||
"name": "Name",
|
||||
"namePlaceholder": "z.B. Zweite Firma GmbH",
|
||||
"slug": "Slug",
|
||||
"slugPlaceholder": "z.B. zweite-firma",
|
||||
"slugHelper": "Kleingeschrieben, Bindestriche statt Leerzeichen.",
|
||||
"users": "Benutzer",
|
||||
"loadingUsers": "Lade Benutzer...",
|
||||
"assign": "Benutzer zuweisen",
|
||||
"assignTitle": "Benutzer zu {{name}} zuweisen",
|
||||
"assignSubmit": "Zuweisen",
|
||||
"user": "Benutzer",
|
||||
"userPlaceholder": "Benutzer auswaehlen",
|
||||
"defaultBadge": "Standard",
|
||||
"empty": "Keine Mandanten vorhanden.",
|
||||
"loadError": "Mandanten konnten nicht geladen werden."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1684,5 +1684,26 @@
|
||||
"revokeConfirm": "Really revoke token '{{name}}'? Applications using it lose access immediately.",
|
||||
"empty": "No API tokens yet.",
|
||||
"loadError": "Failed to load API tokens."
|
||||
},
|
||||
"tenants": {
|
||||
"title": "Tenants",
|
||||
"create": "Create tenant",
|
||||
"createTitle": "Create a new tenant",
|
||||
"createSubmit": "Create",
|
||||
"name": "Name",
|
||||
"namePlaceholder": "e.g. Second Company Ltd",
|
||||
"slug": "Slug",
|
||||
"slugPlaceholder": "e.g. second-company",
|
||||
"slugHelper": "Lowercase, hyphens instead of spaces.",
|
||||
"users": "Users",
|
||||
"loadingUsers": "Loading users...",
|
||||
"assign": "Assign user",
|
||||
"assignTitle": "Assign user to {{name}}",
|
||||
"assignSubmit": "Assign",
|
||||
"user": "User",
|
||||
"userPlaceholder": "Select a user",
|
||||
"defaultBadge": "Default",
|
||||
"empty": "No tenants yet.",
|
||||
"loadError": "Failed to load tenants."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
@@ -46,6 +46,7 @@ const ActivityTimelinePage = React.lazy(() => import('@/pages/ActivityTimeline')
|
||||
const ApprovalsPage = React.lazy(() => import('@/pages/Approvals').then(m => ({ default: m.ApprovalsPage })));
|
||||
const DelegationsPage = React.lazy(() => import('@/pages/Delegations').then(m => ({ default: m.DelegationsPage })));
|
||||
const ApiTokensPage = React.lazy(() => import('@/pages/ApiTokens').then(m => ({ default: m.ApiTokensPage })));
|
||||
const TenantsPage = React.lazy(() => import('@/pages/Tenants').then(m => ({ default: m.TenantsPage })));
|
||||
const SettingsWebhooksPage = React.lazy(() => import('@/pages/SettingsWebhooks').then(m => ({ default: m.SettingsWebhooksPage })));
|
||||
const SettingsBackupPage = React.lazy(() => import('@/pages/SettingsBackup').then(m => ({ default: m.SettingsBackupPage })));
|
||||
const WorkspaceManagerPage = React.lazy(() => import('@/pages/SettingsWorkspaces').then(m => ({ default: m.WorkspaceManagerPage })));
|
||||
@@ -206,6 +207,7 @@ const router = createBrowserRouter([
|
||||
{ path: 'workspaces', element: withSuspense(<WorkspaceManagerPage />) },
|
||||
{ path: 'backup', element: withSuspense(<SettingsBackupPage />) },
|
||||
{ path: 'api-tokens', element: withSuspense(<ApiTokensPage />) },
|
||||
{ path: 'tenants', element: withSuspense(<TenantsPage />) },
|
||||
{ path: 'rechte', element: <PermissionRoute permission="settings:read">{withSuspense(<SettingsRechtePage />)}</PermissionRoute> },
|
||||
// Phase Q2: plugin settings sub-pages render with bare sub-segments
|
||||
{ path: '*', element: <ErrorBoundary>{<PluginRouteRenderer variant="settings" />}</ErrorBoundary> },
|
||||
|
||||
Reference in New Issue
Block a user