Add access management UI for project admins
Components: - AccessManagement component for managing project permissions - Display list of users with access to project - Add user form with username and access level selection - Edit access level inline - Revoke access with confirmation Integration: - Show AccessManagement on ProjectPage for admin users - Uses listProjectPermissions, grantProjectAccess, etc. APIs Styling: - Access level badges with color coding - Responsive form layout - Action buttons for edit/revoke
This commit is contained in:
Mondo Diaz
248
frontend/src/components/AccessManagement.tsx
Normal file
248
frontend/src/components/AccessManagement.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { AccessPermission, AccessLevel } from '../types';
|
||||
import {
|
||||
listProjectPermissions,
|
||||
grantProjectAccess,
|
||||
updateProjectAccess,
|
||||
revokeProjectAccess,
|
||||
} from '../api';
|
||||
import './AccessManagement.css';
|
||||
|
||||
interface AccessManagementProps {
|
||||
projectName: string;
|
||||
}
|
||||
|
||||
export function AccessManagement({ projectName }: AccessManagementProps) {
|
||||
const [permissions, setPermissions] = useState<AccessPermission[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
|
||||
// Form state
|
||||
const [showAddForm, setShowAddForm] = useState(false);
|
||||
const [newUsername, setNewUsername] = useState('');
|
||||
const [newLevel, setNewLevel] = useState<AccessLevel>('read');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
// Edit state
|
||||
const [editingUser, setEditingUser] = useState<string | null>(null);
|
||||
const [editLevel, setEditLevel] = useState<AccessLevel>('read');
|
||||
|
||||
const loadPermissions = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await listProjectPermissions(projectName);
|
||||
setPermissions(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load permissions');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [projectName]);
|
||||
|
||||
useEffect(() => {
|
||||
loadPermissions();
|
||||
}, [loadPermissions]);
|
||||
|
||||
const handleGrant = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newUsername.trim()) return;
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
await grantProjectAccess(projectName, {
|
||||
username: newUsername.trim(),
|
||||
level: newLevel,
|
||||
});
|
||||
setSuccess(`Access granted to ${newUsername}`);
|
||||
setNewUsername('');
|
||||
setNewLevel('read');
|
||||
setShowAddForm(false);
|
||||
await loadPermissions();
|
||||
setTimeout(() => setSuccess(null), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to grant access');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (username: string) => {
|
||||
try {
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
await updateProjectAccess(projectName, username, { level: editLevel });
|
||||
setSuccess(`Updated access for ${username}`);
|
||||
setEditingUser(null);
|
||||
await loadPermissions();
|
||||
setTimeout(() => setSuccess(null), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to update access');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRevoke = async (username: string) => {
|
||||
if (!confirm(`Revoke access for ${username}?`)) return;
|
||||
|
||||
try {
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
await revokeProjectAccess(projectName, username);
|
||||
setSuccess(`Access revoked for ${username}`);
|
||||
await loadPermissions();
|
||||
setTimeout(() => setSuccess(null), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to revoke access');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const startEdit = (permission: AccessPermission) => {
|
||||
setEditingUser(permission.user_id);
|
||||
setEditLevel(permission.level as AccessLevel);
|
||||
};
|
||||
|
||||
const cancelEdit = () => {
|
||||
setEditingUser(null);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="access-management loading">Loading permissions...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="access-management card">
|
||||
<div className="access-management__header">
|
||||
<h3>Access Management</h3>
|
||||
<button
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => setShowAddForm(!showAddForm)}
|
||||
>
|
||||
{showAddForm ? 'Cancel' : '+ Add User'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
{success && <div className="success-message">{success}</div>}
|
||||
|
||||
{showAddForm && (
|
||||
<form className="access-management__form" onSubmit={handleGrant}>
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label htmlFor="username">Username</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
value={newUsername}
|
||||
onChange={(e) => setNewUsername(e.target.value)}
|
||||
placeholder="Enter username"
|
||||
required
|
||||
disabled={submitting}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="level">Access Level</label>
|
||||
<select
|
||||
id="level"
|
||||
value={newLevel}
|
||||
onChange={(e) => setNewLevel(e.target.value as AccessLevel)}
|
||||
disabled={submitting}
|
||||
>
|
||||
<option value="read">Read</option>
|
||||
<option value="write">Write</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary" disabled={submitting}>
|
||||
{submitting ? 'Granting...' : 'Grant Access'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<div className="access-management__list">
|
||||
{permissions.length === 0 ? (
|
||||
<p className="text-muted">No explicit permissions set. Only the project owner has access.</p>
|
||||
) : (
|
||||
<table className="access-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Access Level</th>
|
||||
<th>Granted</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{permissions.map((p) => (
|
||||
<tr key={p.id}>
|
||||
<td>{p.user_id}</td>
|
||||
<td>
|
||||
{editingUser === p.user_id ? (
|
||||
<select
|
||||
value={editLevel}
|
||||
onChange={(e) => setEditLevel(e.target.value as AccessLevel)}
|
||||
disabled={submitting}
|
||||
>
|
||||
<option value="read">Read</option>
|
||||
<option value="write">Write</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
) : (
|
||||
<span className={`access-badge access-badge--${p.level}`}>
|
||||
{p.level}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td>{new Date(p.created_at).toLocaleDateString()}</td>
|
||||
<td className="actions">
|
||||
{editingUser === p.user_id ? (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => handleUpdate(p.user_id)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={cancelEdit}
|
||||
disabled={submitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => startEdit(p)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleRevoke(p.user_id)}
|
||||
disabled={submitting}
|
||||
>
|
||||
Revoke
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user