refactor: restructure RBAC page to container + tab components, add CSS module
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
@@ -1,178 +1,38 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import {
|
||||
Tabs, DataTable, Badge, Avatar, Button, Input, Modal, FormField,
|
||||
Select, AlertDialog, StatCard, Spinner,
|
||||
} from '@cameleer/design-system';
|
||||
import type { Column } from '@cameleer/design-system';
|
||||
import {
|
||||
useUsers, useUser, useGroups, useGroup, useRoles, useRole, useRbacStats,
|
||||
useCreateUser, useUpdateUser, useDeleteUser,
|
||||
useAssignRoleToUser, useRemoveRoleFromUser,
|
||||
useAddUserToGroup, useRemoveUserFromGroup,
|
||||
useCreateGroup, useUpdateGroup, useDeleteGroup,
|
||||
useCreateRole, useUpdateRole, useDeleteRole,
|
||||
useAssignRoleToGroup, useRemoveRoleFromGroup,
|
||||
} from '../../api/queries/admin/rbac';
|
||||
import { useState } from 'react';
|
||||
import { StatCard, Tabs } from '@cameleer/design-system';
|
||||
import { useRbacStats } from '../../api/queries/admin/rbac';
|
||||
import styles from './UserManagement.module.css';
|
||||
|
||||
// Lazy imports for tab components (will be created in tasks 17-19)
|
||||
// For now, use placeholder components so the page compiles
|
||||
const UsersTab = () => <div>Users tab — coming soon</div>;
|
||||
const GroupsTab = () => <div>Groups tab — coming soon</div>;
|
||||
const RolesTab = () => <div>Roles tab — coming soon</div>;
|
||||
|
||||
export default function RbacPage() {
|
||||
const [tab, setTab] = useState('users');
|
||||
const { data: stats } = useRbacStats();
|
||||
const [tab, setTab] = useState('users');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 style={{ marginBottom: '1rem' }}>RBAC Management</h2>
|
||||
|
||||
<div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
|
||||
<h2 style={{ margin: '0 0 16px' }}>User Management</h2>
|
||||
<div className={styles.statStrip}>
|
||||
<StatCard label="Users" value={stats?.userCount ?? 0} />
|
||||
<StatCard label="Groups" value={stats?.groupCount ?? 0} />
|
||||
<StatCard label="Roles" value={stats?.roleCount ?? 0} />
|
||||
</div>
|
||||
|
||||
<Tabs
|
||||
tabs={[
|
||||
{ label: 'Users', value: 'users', count: stats?.userCount },
|
||||
{ label: 'Groups', value: 'groups', count: stats?.groupCount },
|
||||
{ label: 'Roles', value: 'roles', count: stats?.roleCount },
|
||||
{ label: 'Users', value: 'users' },
|
||||
{ label: 'Groups', value: 'groups' },
|
||||
{ label: 'Roles', value: 'roles' },
|
||||
]}
|
||||
active={tab}
|
||||
onChange={setTab}
|
||||
/>
|
||||
|
||||
<div style={{ marginTop: '1rem' }}>
|
||||
{tab === 'users' && <UsersTab />}
|
||||
{tab === 'groups' && <GroupsTab />}
|
||||
{tab === 'roles' && <RolesTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UsersTab() {
|
||||
const { data: users, isLoading } = useUsers();
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||
const [form, setForm] = useState({ username: '', displayName: '', email: '', password: '' });
|
||||
const createUser = useCreateUser();
|
||||
const deleteUser = useDeleteUser();
|
||||
|
||||
const columns: Column<any>[] = [
|
||||
{ key: 'userId', header: 'Username', render: (v) => <span style={{ fontWeight: 500 }}>{String(v)}</span> },
|
||||
{ key: 'displayName', header: 'Display Name' },
|
||||
{ key: 'email', header: 'Email' },
|
||||
{ key: 'provider', header: 'Provider', render: (v) => <Badge label={String(v)} /> },
|
||||
{
|
||||
key: 'effectiveRoles', header: 'Roles',
|
||||
render: (v) => (
|
||||
<div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap' }}>
|
||||
{(v as any[] || []).map((r: any) => <Badge key={r.id || r.name} label={r.name} color="auto" />)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) return <Spinner />;
|
||||
|
||||
const rows = (users || []).map((u: any) => ({ ...u, id: u.userId }));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
|
||||
<Button variant="primary" onClick={() => setCreateOpen(true)}>Create User</Button>
|
||||
</div>
|
||||
<DataTable columns={columns} data={rows} pageSize={20} />
|
||||
|
||||
<Modal open={createOpen} onClose={() => setCreateOpen(false)} title="Create User">
|
||||
<div style={{ display: 'grid', gap: '1rem', padding: '1rem' }}>
|
||||
<FormField label="Username" required><Input value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} /></FormField>
|
||||
<FormField label="Display Name"><Input value={form.displayName} onChange={(e) => setForm({ ...form, displayName: e.target.value })} /></FormField>
|
||||
<FormField label="Email"><Input value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></FormField>
|
||||
<FormField label="Password"><Input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} /></FormField>
|
||||
<Button variant="primary" onClick={() => { createUser.mutate(form); setCreateOpen(false); setForm({ username: '', displayName: '', email: '', password: '' }); }}>Create</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<AlertDialog
|
||||
open={!!deleteId}
|
||||
onClose={() => setDeleteId(null)}
|
||||
onConfirm={() => { if (deleteId) deleteUser.mutate(deleteId); setDeleteId(null); }}
|
||||
title="Delete User"
|
||||
description={`Are you sure you want to delete user "${deleteId}"?`}
|
||||
confirmLabel="Delete"
|
||||
variant="danger"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function GroupsTab() {
|
||||
const { data: groups, isLoading } = useGroups();
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [form, setForm] = useState({ name: '' });
|
||||
const createGroup = useCreateGroup();
|
||||
|
||||
const columns: Column<any>[] = [
|
||||
{ key: 'name', header: 'Name', render: (v) => <span style={{ fontWeight: 500 }}>{String(v)}</span> },
|
||||
{ key: 'members', header: 'Members', render: (v) => String((v as any[])?.length ?? 0) },
|
||||
{
|
||||
key: 'effectiveRoles', header: 'Roles',
|
||||
render: (v) => (
|
||||
<div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap' }}>
|
||||
{(v as any[] || []).map((r: any) => <Badge key={r.id || r.name} label={r.name} color="auto" />)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (isLoading) return <Spinner />;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
|
||||
<Button variant="primary" onClick={() => setCreateOpen(true)}>Create Group</Button>
|
||||
</div>
|
||||
<DataTable columns={columns} data={groups || []} pageSize={20} />
|
||||
|
||||
<Modal open={createOpen} onClose={() => setCreateOpen(false)} title="Create Group">
|
||||
<div style={{ display: 'grid', gap: '1rem', padding: '1rem' }}>
|
||||
<FormField label="Name" required><Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></FormField>
|
||||
<Button variant="primary" onClick={() => { createGroup.mutate(form); setCreateOpen(false); setForm({ name: '' }); }}>Create</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RolesTab() {
|
||||
const { data: roles, isLoading } = useRoles();
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [form, setForm] = useState({ name: '', description: '', scope: '' });
|
||||
const createRole = useCreateRole();
|
||||
|
||||
const columns: Column<any>[] = [
|
||||
{ key: 'name', header: 'Name', render: (v) => <span style={{ fontWeight: 500 }}>{String(v)}</span> },
|
||||
{ key: 'description', header: 'Description' },
|
||||
{ key: 'scope', header: 'Scope', render: (v) => v ? <Badge label={String(v)} /> : null },
|
||||
{ key: 'system', header: 'System', render: (v) => v ? <Badge label="System" color="warning" /> : null },
|
||||
{ key: 'effectivePrincipals', header: 'Users', render: (v) => String((v as any[])?.length ?? 0) },
|
||||
];
|
||||
|
||||
if (isLoading) return <Spinner />;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
|
||||
<Button variant="primary" onClick={() => setCreateOpen(true)}>Create Role</Button>
|
||||
</div>
|
||||
<DataTable columns={columns} data={roles || []} pageSize={20} />
|
||||
|
||||
<Modal open={createOpen} onClose={() => setCreateOpen(false)} title="Create Role">
|
||||
<div style={{ display: 'grid', gap: '1rem', padding: '1rem' }}>
|
||||
<FormField label="Name" required><Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></FormField>
|
||||
<FormField label="Description"><Input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></FormField>
|
||||
<FormField label="Scope"><Input value={form.scope} onChange={(e) => setForm({ ...form, scope: e.target.value })} /></FormField>
|
||||
<Button variant="primary" onClick={() => { createRole.mutate(form); setCreateOpen(false); setForm({ name: '', description: '', scope: '' }); }}>Create</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
{tab === 'users' && <UsersTab />}
|
||||
{tab === 'groups' && <GroupsTab />}
|
||||
{tab === 'roles' && <RolesTab />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user