Add package dependencies system and project settings page
This commit is contained in:
Mondo Diaz
308
frontend/src/pages/ProjectSettingsPage.tsx
Normal file
308
frontend/src/pages/ProjectSettingsPage.tsx
Normal file
@@ -0,0 +1,308 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Project } from '../types';
|
||||
import {
|
||||
getProject,
|
||||
updateProject,
|
||||
deleteProject,
|
||||
getMyProjectAccess,
|
||||
UnauthorizedError,
|
||||
ForbiddenError,
|
||||
} from '../api';
|
||||
import { Breadcrumb } from '../components/Breadcrumb';
|
||||
import { AccessManagement } from '../components/AccessManagement';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import './ProjectSettingsPage.css';
|
||||
|
||||
function ProjectSettingsPage() {
|
||||
const { projectName } = useParams<{ projectName: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { user } = useAuth();
|
||||
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
const [accessDenied, setAccessDenied] = useState(false);
|
||||
const [canAdmin, setCanAdmin] = useState(false);
|
||||
|
||||
// General settings form state
|
||||
const [description, setDescription] = useState('');
|
||||
const [isPublic, setIsPublic] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Delete confirmation state
|
||||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||||
const [deleteConfirmText, setDeleteConfirmText] = useState('');
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
if (!projectName) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setAccessDenied(false);
|
||||
const [projectData, accessResult] = await Promise.all([
|
||||
getProject(projectName),
|
||||
getMyProjectAccess(projectName),
|
||||
]);
|
||||
setProject(projectData);
|
||||
setDescription(projectData.description || '');
|
||||
setIsPublic(projectData.is_public);
|
||||
|
||||
const hasAdminAccess = accessResult.access_level === 'admin';
|
||||
setCanAdmin(hasAdminAccess);
|
||||
|
||||
if (!hasAdminAccess) {
|
||||
setAccessDenied(true);
|
||||
}
|
||||
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
if (err instanceof UnauthorizedError) {
|
||||
navigate('/login', { state: { from: `/project/${projectName}/settings` } });
|
||||
return;
|
||||
}
|
||||
if (err instanceof ForbiddenError) {
|
||||
setAccessDenied(true);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setError(err instanceof Error ? err.message : 'Failed to load project');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [projectName, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
const handleSaveSettings = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!projectName) return;
|
||||
|
||||
try {
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
const updatedProject = await updateProject(projectName, {
|
||||
description: description || undefined,
|
||||
is_public: isPublic,
|
||||
});
|
||||
setProject(updatedProject);
|
||||
setSuccess('Settings saved successfully');
|
||||
setTimeout(() => setSuccess(null), 3000);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to save settings');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteProject = async () => {
|
||||
if (!projectName || deleteConfirmText !== projectName) return;
|
||||
|
||||
try {
|
||||
setDeleting(true);
|
||||
setError(null);
|
||||
await deleteProject(projectName);
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to delete project');
|
||||
setDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelDelete = () => {
|
||||
setShowDeleteConfirm(false);
|
||||
setDeleteConfirmText('');
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="project-settings-page">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: 'Projects', href: '/' },
|
||||
{ label: projectName || '', href: `/project/${projectName}` },
|
||||
{ label: 'Settings' },
|
||||
]}
|
||||
/>
|
||||
<div className="project-settings-loading">
|
||||
<div className="project-settings-spinner" />
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (accessDenied || !canAdmin) {
|
||||
return (
|
||||
<div className="project-settings-page">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: 'Projects', href: '/' },
|
||||
{ label: projectName || '', href: `/project/${projectName}` },
|
||||
{ label: 'Settings' },
|
||||
]}
|
||||
/>
|
||||
<div className="project-settings-access-denied">
|
||||
<h2>Access Denied</h2>
|
||||
<p>You must be a project admin to access settings.</p>
|
||||
{!user && (
|
||||
<p style={{ marginTop: '16px' }}>
|
||||
<a href="/login" className="btn btn-primary">
|
||||
Sign in
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<div className="project-settings-page">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: 'Projects', href: '/' },
|
||||
{ label: projectName || '' },
|
||||
]}
|
||||
/>
|
||||
<div className="project-settings-error">Project not found</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="project-settings-page">
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ label: 'Projects', href: '/' },
|
||||
{ label: project.name, href: `/project/${project.name}` },
|
||||
{ label: 'Settings' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="project-settings-header">
|
||||
<h1>Project Settings</h1>
|
||||
<p className="project-settings-subtitle">Manage settings for {project.name}</p>
|
||||
</div>
|
||||
|
||||
{error && <div className="project-settings-error">{error}</div>}
|
||||
{success && <div className="project-settings-success">{success}</div>}
|
||||
|
||||
{/* General Settings Section */}
|
||||
<div className="project-settings-section">
|
||||
<h2>General</h2>
|
||||
<form className="project-settings-form" onSubmit={handleSaveSettings}>
|
||||
<div className="project-settings-form-group">
|
||||
<label htmlFor="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Describe your project..."
|
||||
disabled={saving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="project-settings-form-group project-settings-checkbox-group">
|
||||
<label className="project-settings-checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isPublic}
|
||||
onChange={(e) => setIsPublic(e.target.checked)}
|
||||
disabled={saving}
|
||||
/>
|
||||
<span className="project-settings-checkbox-custom" />
|
||||
<span>Public project (visible to everyone)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="project-settings-form-actions">
|
||||
<button type="submit" className="project-settings-save-button" disabled={saving}>
|
||||
{saving ? (
|
||||
<>
|
||||
<span className="project-settings-button-spinner" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
'Save Changes'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Access Management Section */}
|
||||
<AccessManagement projectName={projectName!} />
|
||||
|
||||
{/* Danger Zone Section */}
|
||||
<div className="project-settings-danger-zone">
|
||||
<h2>Danger Zone</h2>
|
||||
<div className="project-settings-danger-item">
|
||||
<div className="project-settings-danger-info">
|
||||
<h3>Delete this project</h3>
|
||||
<p>
|
||||
Once you delete a project, there is no going back. This will permanently delete the
|
||||
project, all packages, artifacts, and tags.
|
||||
</p>
|
||||
</div>
|
||||
{!showDeleteConfirm && (
|
||||
<button
|
||||
className="project-settings-delete-button"
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
disabled={deleting}
|
||||
>
|
||||
Delete Project
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showDeleteConfirm && (
|
||||
<div className="project-settings-delete-confirm">
|
||||
<p>
|
||||
Type <strong>{project.name}</strong> to confirm deletion:
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
className="project-settings-delete-confirm-input"
|
||||
value={deleteConfirmText}
|
||||
onChange={(e) => setDeleteConfirmText(e.target.value)}
|
||||
placeholder={project.name}
|
||||
disabled={deleting}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="project-settings-delete-confirm-actions">
|
||||
<button
|
||||
className="project-settings-confirm-delete-button"
|
||||
onClick={handleDeleteProject}
|
||||
disabled={deleting || deleteConfirmText !== project.name}
|
||||
>
|
||||
{deleting ? (
|
||||
<>
|
||||
<span className="project-settings-delete-spinner" />
|
||||
Deleting...
|
||||
</>
|
||||
) : (
|
||||
'Yes, delete this project'
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
className="project-settings-cancel-button"
|
||||
onClick={handleCancelDelete}
|
||||
disabled={deleting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProjectSettingsPage;
|
||||
Reference in New Issue
Block a user