Add package dependencies system and project settings page
This commit is contained in:
Mondo Diaz
@@ -358,6 +358,12 @@
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.page-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Package card styles */
|
||||
.package-card__header {
|
||||
display: flex;
|
||||
|
||||
@@ -127,6 +127,12 @@ h2 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Action buttons in table */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Download by Artifact ID Section */
|
||||
.download-by-id-section {
|
||||
margin-top: 32px;
|
||||
@@ -424,6 +430,340 @@ tr:hover .copy-btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Dependencies Section */
|
||||
.dependencies-section {
|
||||
margin-top: 32px;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.dependencies-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dependencies-header h3 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dependencies-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dependencies-controls .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dependencies-tag-select {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.tag-selector {
|
||||
padding: 8px 12px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.tag-selector:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.deps-loading {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.deps-error {
|
||||
color: var(--error-color, #ef4444);
|
||||
font-size: 0.875rem;
|
||||
padding: 12px 16px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.deps-empty {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.deps-summary {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.deps-summary strong {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.deps-items {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dep-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.dep-link {
|
||||
color: var(--accent-primary);
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.dep-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.dep-constraint {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.dep-status {
|
||||
margin-left: auto;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dep-status--ok {
|
||||
color: var(--success-color, #10b981);
|
||||
}
|
||||
|
||||
.dep-status--missing {
|
||||
color: var(--warning-color, #f59e0b);
|
||||
}
|
||||
|
||||
/* Tag name link in table */
|
||||
.tag-name-link {
|
||||
color: var(--accent-primary);
|
||||
transition: opacity var(--transition-fast);
|
||||
}
|
||||
|
||||
.tag-name-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tag-name-link.selected {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Used By (Reverse Dependencies) Section */
|
||||
.used-by-section {
|
||||
margin-top: 32px;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.used-by-section h3 {
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.reverse-dep-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dep-version {
|
||||
color: var(--accent-primary);
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
font-size: 0.8125rem;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.dep-requires {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.reverse-deps-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Ensure File Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.ensure-file-modal {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.ensure-file-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.ensure-file-header h3 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ensure-file-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ensure-file-actions .copy-btn {
|
||||
opacity: 1;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.ensure-file-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.ensure-file-loading {
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.ensure-file-error {
|
||||
color: var(--error-color, #ef4444);
|
||||
padding: 16px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.ensure-file-empty {
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ensure-file-yaml {
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
background: #0d0d0f;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.ensure-file-yaml code {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
font-size: 0.8125rem;
|
||||
color: #e2e8f0;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.ensure-file-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
||||
}
|
||||
|
||||
.ensure-file-hint {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.ensure-file-hint code {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.upload-form {
|
||||
@@ -439,4 +779,18 @@ tr:hover .copy-btn {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.dependencies-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.tag-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ensure-file-modal {
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, useSearchParams, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { TagDetail, Package, PaginatedResponse, AccessLevel } from '../types';
|
||||
import { listTags, getDownloadUrl, getPackage, getMyProjectAccess, createTag, UnauthorizedError, ForbiddenError } from '../api';
|
||||
import { useParams, useSearchParams, useNavigate, useLocation, Link } from 'react-router-dom';
|
||||
import { TagDetail, Package, PaginatedResponse, AccessLevel, Dependency, DependentInfo } from '../types';
|
||||
import { listTags, getDownloadUrl, getPackage, getMyProjectAccess, createTag, getArtifactDependencies, getReverseDependencies, getEnsureFile, UnauthorizedError, ForbiddenError } from '../api';
|
||||
import { Breadcrumb } from '../components/Breadcrumb';
|
||||
import { Badge } from '../components/Badge';
|
||||
import { SearchInput } from '../components/SearchInput';
|
||||
@@ -10,6 +10,7 @@ import { DataTable } from '../components/DataTable';
|
||||
import { Pagination } from '../components/Pagination';
|
||||
import { DragDropUpload, UploadResult } from '../components/DragDropUpload';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import DependencyGraph from '../components/DependencyGraph';
|
||||
import './Home.css';
|
||||
import './PackagePage.css';
|
||||
|
||||
@@ -68,6 +69,30 @@ function PackagePage() {
|
||||
const [createTagArtifactId, setCreateTagArtifactId] = useState('');
|
||||
const [createTagLoading, setCreateTagLoading] = useState(false);
|
||||
|
||||
// Dependencies state
|
||||
const [selectedTag, setSelectedTag] = useState<TagDetail | null>(null);
|
||||
const [dependencies, setDependencies] = useState<Dependency[]>([]);
|
||||
const [depsLoading, setDepsLoading] = useState(false);
|
||||
const [depsError, setDepsError] = useState<string | null>(null);
|
||||
|
||||
// Reverse dependencies state
|
||||
const [reverseDeps, setReverseDeps] = useState<DependentInfo[]>([]);
|
||||
const [reverseDepsLoading, setReverseDepsLoading] = useState(false);
|
||||
const [reverseDepsError, setReverseDepsError] = useState<string | null>(null);
|
||||
const [reverseDepsPage, setReverseDepsPage] = useState(1);
|
||||
const [reverseDepsTotal, setReverseDepsTotal] = useState(0);
|
||||
const [reverseDepsHasMore, setReverseDepsHasMore] = useState(false);
|
||||
|
||||
// Dependency graph modal state
|
||||
const [showGraph, setShowGraph] = useState(false);
|
||||
|
||||
// Ensure file modal state
|
||||
const [showEnsureFile, setShowEnsureFile] = useState(false);
|
||||
const [ensureFileContent, setEnsureFileContent] = useState<string | null>(null);
|
||||
const [ensureFileLoading, setEnsureFileLoading] = useState(false);
|
||||
const [ensureFileError, setEnsureFileError] = useState<string | null>(null);
|
||||
const [ensureFileTagName, setEnsureFileTagName] = useState<string | null>(null);
|
||||
|
||||
// Derived permissions
|
||||
const canWrite = accessLevel === 'write' || accessLevel === 'admin';
|
||||
|
||||
@@ -128,6 +153,98 @@ function PackagePage() {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
// Auto-select tag when tags are loaded (prefer version from URL, then first tag)
|
||||
// Re-run when package changes to pick up new tags
|
||||
useEffect(() => {
|
||||
if (tagsData?.items && tagsData.items.length > 0) {
|
||||
const versionParam = searchParams.get('version');
|
||||
if (versionParam) {
|
||||
// Find tag matching the version parameter
|
||||
const matchingTag = tagsData.items.find(t => t.version === versionParam);
|
||||
if (matchingTag) {
|
||||
setSelectedTag(matchingTag);
|
||||
setDependencies([]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Fall back to first tag
|
||||
setSelectedTag(tagsData.items[0]);
|
||||
setDependencies([]);
|
||||
}
|
||||
}, [tagsData, searchParams, projectName, packageName]);
|
||||
|
||||
// Fetch dependencies when selected tag changes
|
||||
const fetchDependencies = useCallback(async (artifactId: string) => {
|
||||
setDepsLoading(true);
|
||||
setDepsError(null);
|
||||
try {
|
||||
const result = await getArtifactDependencies(artifactId);
|
||||
setDependencies(result.dependencies);
|
||||
} catch (err) {
|
||||
setDepsError(err instanceof Error ? err.message : 'Failed to load dependencies');
|
||||
setDependencies([]);
|
||||
} finally {
|
||||
setDepsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTag) {
|
||||
fetchDependencies(selectedTag.artifact_id);
|
||||
}
|
||||
}, [selectedTag, fetchDependencies]);
|
||||
|
||||
// Fetch reverse dependencies
|
||||
const fetchReverseDeps = useCallback(async (pageNum: number = 1) => {
|
||||
if (!projectName || !packageName) return;
|
||||
|
||||
setReverseDepsLoading(true);
|
||||
setReverseDepsError(null);
|
||||
try {
|
||||
const result = await getReverseDependencies(projectName, packageName, { page: pageNum, limit: 10 });
|
||||
setReverseDeps(result.dependents);
|
||||
setReverseDepsTotal(result.pagination.total);
|
||||
setReverseDepsHasMore(result.pagination.has_more);
|
||||
setReverseDepsPage(pageNum);
|
||||
} catch (err) {
|
||||
setReverseDepsError(err instanceof Error ? err.message : 'Failed to load reverse dependencies');
|
||||
setReverseDeps([]);
|
||||
} finally {
|
||||
setReverseDepsLoading(false);
|
||||
}
|
||||
}, [projectName, packageName]);
|
||||
|
||||
useEffect(() => {
|
||||
if (projectName && packageName && !loading) {
|
||||
fetchReverseDeps(1);
|
||||
}
|
||||
}, [projectName, packageName, loading, fetchReverseDeps]);
|
||||
|
||||
// Fetch ensure file for a specific tag
|
||||
const fetchEnsureFileForTag = useCallback(async (tagName: string) => {
|
||||
if (!projectName || !packageName) return;
|
||||
|
||||
setEnsureFileTagName(tagName);
|
||||
setEnsureFileLoading(true);
|
||||
setEnsureFileError(null);
|
||||
try {
|
||||
const content = await getEnsureFile(projectName, packageName, tagName);
|
||||
setEnsureFileContent(content);
|
||||
setShowEnsureFile(true);
|
||||
} catch (err) {
|
||||
setEnsureFileError(err instanceof Error ? err.message : 'Failed to load ensure file');
|
||||
setShowEnsureFile(true);
|
||||
} finally {
|
||||
setEnsureFileLoading(false);
|
||||
}
|
||||
}, [projectName, packageName]);
|
||||
|
||||
// Fetch ensure file for selected tag
|
||||
const fetchEnsureFile = useCallback(async () => {
|
||||
if (!selectedTag) return;
|
||||
fetchEnsureFileForTag(selectedTag.name);
|
||||
}, [selectedTag, fetchEnsureFileForTag]);
|
||||
|
||||
// Keyboard navigation - go back with backspace
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
@@ -202,12 +319,24 @@ function PackagePage() {
|
||||
const tags = tagsData?.items || [];
|
||||
const pagination = tagsData?.pagination;
|
||||
|
||||
const handleTagSelect = (tag: TagDetail) => {
|
||||
setSelectedTag(tag);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: 'name',
|
||||
header: 'Tag',
|
||||
sortable: true,
|
||||
render: (t: TagDetail) => <strong>{t.name}</strong>,
|
||||
render: (t: TagDetail) => (
|
||||
<strong
|
||||
className={`tag-name-link ${selectedTag?.id === t.id ? 'selected' : ''}`}
|
||||
onClick={() => handleTagSelect(t)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
{t.name}
|
||||
</strong>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'version',
|
||||
@@ -261,13 +390,22 @@ function PackagePage() {
|
||||
key: 'actions',
|
||||
header: 'Actions',
|
||||
render: (t: TagDetail) => (
|
||||
<a
|
||||
href={getDownloadUrl(projectName!, packageName!, t.name)}
|
||||
className="btn btn-secondary btn-small"
|
||||
download
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
<div className="action-buttons">
|
||||
<button
|
||||
className="btn btn-secondary btn-small"
|
||||
onClick={() => fetchEnsureFileForTag(t.name)}
|
||||
title="View orchard.ensure file"
|
||||
>
|
||||
Ensure
|
||||
</button>
|
||||
<a
|
||||
href={getDownloadUrl(projectName!, packageName!, t.name)}
|
||||
className="btn btn-secondary btn-small"
|
||||
download
|
||||
>
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
@@ -439,6 +577,166 @@ function PackagePage() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Dependencies Section */}
|
||||
{tags.length > 0 && (
|
||||
<div className="dependencies-section card">
|
||||
<div className="dependencies-header">
|
||||
<h3>Dependencies</h3>
|
||||
<div className="dependencies-controls">
|
||||
{selectedTag && (
|
||||
<>
|
||||
<button
|
||||
className="btn btn-secondary btn-small"
|
||||
onClick={fetchEnsureFile}
|
||||
disabled={ensureFileLoading}
|
||||
title="View orchard.ensure file"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginRight: '6px' }}>
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||||
<polyline points="10 9 9 9 8 9"></polyline>
|
||||
</svg>
|
||||
{ensureFileLoading ? 'Loading...' : 'View Ensure File'}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-secondary btn-small"
|
||||
onClick={() => setShowGraph(true)}
|
||||
title="View full dependency tree"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ marginRight: '6px' }}>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<circle cx="4" cy="4" r="2"></circle>
|
||||
<circle cx="20" cy="4" r="2"></circle>
|
||||
<circle cx="4" cy="20" r="2"></circle>
|
||||
<circle cx="20" cy="20" r="2"></circle>
|
||||
<line x1="9.5" y1="9.5" x2="5.5" y2="5.5"></line>
|
||||
<line x1="14.5" y1="9.5" x2="18.5" y2="5.5"></line>
|
||||
<line x1="9.5" y1="14.5" x2="5.5" y2="18.5"></line>
|
||||
<line x1="14.5" y1="14.5" x2="18.5" y2="18.5"></line>
|
||||
</svg>
|
||||
View Graph
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="dependencies-tag-select">
|
||||
{selectedTag && (
|
||||
<select
|
||||
className="tag-selector"
|
||||
value={selectedTag.id}
|
||||
onChange={(e) => {
|
||||
const tag = tags.find(t => t.id === e.target.value);
|
||||
if (tag) setSelectedTag(tag);
|
||||
}}
|
||||
>
|
||||
{tags.map(t => (
|
||||
<option key={t.id} value={t.id}>
|
||||
{t.name}{t.version ? ` (${t.version})` : ''}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{depsLoading ? (
|
||||
<div className="deps-loading">Loading dependencies...</div>
|
||||
) : depsError ? (
|
||||
<div className="deps-error">{depsError}</div>
|
||||
) : dependencies.length === 0 ? (
|
||||
<div className="deps-empty">
|
||||
{selectedTag ? (
|
||||
<span><strong>{selectedTag.name}</strong> has no dependencies</span>
|
||||
) : (
|
||||
<span>No dependencies</span>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="deps-list">
|
||||
<div className="deps-summary">
|
||||
<strong>{selectedTag?.name}</strong> has {dependencies.length} {dependencies.length === 1 ? 'dependency' : 'dependencies'}:
|
||||
</div>
|
||||
<ul className="deps-items">
|
||||
{dependencies.map((dep) => (
|
||||
<li key={dep.id} className="dep-item">
|
||||
<Link
|
||||
to={`/project/${dep.project}/${dep.package}`}
|
||||
className="dep-link"
|
||||
>
|
||||
{dep.project}/{dep.package}
|
||||
</Link>
|
||||
<span className="dep-constraint">
|
||||
@ {dep.version || dep.tag}
|
||||
</span>
|
||||
<span className="dep-status dep-status--ok" title="Package exists">
|
||||
✓
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Used By (Reverse Dependencies) Section */}
|
||||
<div className="used-by-section card">
|
||||
<h3>Used By</h3>
|
||||
|
||||
{reverseDepsLoading ? (
|
||||
<div className="deps-loading">Loading reverse dependencies...</div>
|
||||
) : reverseDepsError ? (
|
||||
<div className="deps-error">{reverseDepsError}</div>
|
||||
) : reverseDeps.length === 0 ? (
|
||||
<div className="deps-empty">No packages depend on this package</div>
|
||||
) : (
|
||||
<div className="reverse-deps-list">
|
||||
<div className="deps-summary">
|
||||
{reverseDepsTotal} {reverseDepsTotal === 1 ? 'package depends' : 'packages depend'} on this:
|
||||
</div>
|
||||
<ul className="deps-items">
|
||||
{reverseDeps.map((dep) => (
|
||||
<li key={dep.artifact_id} className="dep-item reverse-dep-item">
|
||||
<Link
|
||||
to={`/project/${dep.project}/${dep.package}${dep.version ? `?version=${dep.version}` : ''}`}
|
||||
className="dep-link"
|
||||
>
|
||||
{dep.project}/{dep.package}
|
||||
{dep.version && (
|
||||
<span className="dep-version">v{dep.version}</span>
|
||||
)}
|
||||
</Link>
|
||||
<span className="dep-requires">
|
||||
requires @ {dep.constraint_value}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{(reverseDepsHasMore || reverseDepsPage > 1) && (
|
||||
<div className="reverse-deps-pagination">
|
||||
<button
|
||||
className="btn btn-secondary btn-small"
|
||||
onClick={() => fetchReverseDeps(reverseDepsPage - 1)}
|
||||
disabled={reverseDepsPage <= 1 || reverseDepsLoading}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="pagination-info">Page {reverseDepsPage}</span>
|
||||
<button
|
||||
className="btn btn-secondary btn-small"
|
||||
onClick={() => fetchReverseDeps(reverseDepsPage + 1)}
|
||||
disabled={!reverseDepsHasMore || reverseDepsLoading}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="download-by-id-section card">
|
||||
<h3>Download by Artifact ID</h3>
|
||||
<div className="download-by-id-form">
|
||||
@@ -522,6 +820,58 @@ function PackagePage() {
|
||||
<code>curl -O {window.location.origin}/api/v1/project/{projectName}/{packageName}/+/v1.0.0</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* Dependency Graph Modal */}
|
||||
{showGraph && selectedTag && (
|
||||
<DependencyGraph
|
||||
projectName={projectName!}
|
||||
packageName={packageName!}
|
||||
tagName={selectedTag.name}
|
||||
onClose={() => setShowGraph(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Ensure File Modal */}
|
||||
{showEnsureFile && (
|
||||
<div className="modal-overlay" onClick={() => setShowEnsureFile(false)}>
|
||||
<div className="ensure-file-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="ensure-file-header">
|
||||
<h3>orchard.ensure for {ensureFileTagName}</h3>
|
||||
<div className="ensure-file-actions">
|
||||
{ensureFileContent && (
|
||||
<CopyButton text={ensureFileContent} />
|
||||
)}
|
||||
<button
|
||||
className="modal-close"
|
||||
onClick={() => setShowEnsureFile(false)}
|
||||
title="Close"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ensure-file-content">
|
||||
{ensureFileLoading ? (
|
||||
<div className="ensure-file-loading">Loading...</div>
|
||||
) : ensureFileError ? (
|
||||
<div className="ensure-file-error">{ensureFileError}</div>
|
||||
) : ensureFileContent ? (
|
||||
<pre className="ensure-file-yaml"><code>{ensureFileContent}</code></pre>
|
||||
) : (
|
||||
<div className="ensure-file-empty">No dependencies defined for this artifact.</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="ensure-file-footer">
|
||||
<p className="ensure-file-hint">
|
||||
Save this as <code>orchard.ensure</code> in your project root to declare dependencies.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,7 +8,6 @@ import { DataTable } from '../components/DataTable';
|
||||
import { SearchInput } from '../components/SearchInput';
|
||||
import { FilterChip, FilterChipGroup } from '../components/FilterChip';
|
||||
import { Pagination } from '../components/Pagination';
|
||||
import { AccessManagement } from '../components/AccessManagement';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import './Home.css';
|
||||
|
||||
@@ -211,15 +210,30 @@ function ProjectPage() {
|
||||
<span className="meta-item">by {project.created_by}</span>
|
||||
</div>
|
||||
</div>
|
||||
{canWrite ? (
|
||||
<button className="btn btn-primary" onClick={() => setShowForm(!showForm)}>
|
||||
{showForm ? 'Cancel' : '+ New Package'}
|
||||
</button>
|
||||
) : user ? (
|
||||
<span className="text-muted" title="You have read-only access to this project">
|
||||
Read-only access
|
||||
</span>
|
||||
) : null}
|
||||
<div className="page-header__actions">
|
||||
{canAdmin && (
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={() => navigate(`/project/${projectName}/settings`)}
|
||||
title="Project Settings"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</svg>
|
||||
Settings
|
||||
</button>
|
||||
)}
|
||||
{canWrite ? (
|
||||
<button className="btn btn-primary" onClick={() => setShowForm(!showForm)}>
|
||||
{showForm ? 'Cancel' : '+ New Package'}
|
||||
</button>
|
||||
) : user ? (
|
||||
<span className="text-muted" title="You have read-only access to this project">
|
||||
Read-only access
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
@@ -371,10 +385,6 @@ function ProjectPage() {
|
||||
onPageChange={handlePageChange}
|
||||
/>
|
||||
)}
|
||||
|
||||
{canAdmin && projectName && (
|
||||
<AccessManagement projectName={projectName} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
476
frontend/src/pages/ProjectSettingsPage.css
Normal file
476
frontend/src/pages/ProjectSettingsPage.css
Normal file
@@ -0,0 +1,476 @@
|
||||
.project-settings-page {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.project-settings-header {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.project-settings-header h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.project-settings-subtitle {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.project-settings-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 64px 24px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.project-settings-spinner {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--border-secondary);
|
||||
border-top-color: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
animation: project-settings-spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes project-settings-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.project-settings-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: var(--error-bg);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
color: var(--error);
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 24px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.project-settings-success {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: var(--success-bg);
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
color: var(--success);
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 24px;
|
||||
font-size: 0.875rem;
|
||||
animation: project-settings-fade-in 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes project-settings-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.project-settings-section {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.project-settings-section h2 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.project-settings-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.project-settings-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.project-settings-form-group label {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.project-settings-form-group textarea,
|
||||
.project-settings-form-group input[type="text"] {
|
||||
padding: 12px 14px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
transition: all var(--transition-fast);
|
||||
font-family: inherit;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.project-settings-form-group textarea {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.project-settings-form-group textarea::placeholder,
|
||||
.project-settings-form-group input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.project-settings-form-group textarea:hover:not(:disabled),
|
||||
.project-settings-form-group input:hover:not(:disabled) {
|
||||
border-color: var(--border-secondary);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.project-settings-form-group textarea:focus,
|
||||
.project-settings-form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
.project-settings-form-group textarea:disabled,
|
||||
.project-settings-form-group input:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.project-settings-checkbox-group {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-settings-checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.project-settings-checkbox-label input[type="checkbox"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.project-settings-checkbox-custom {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.project-settings-checkbox-label input[type="checkbox"]:checked + .project-settings-checkbox-custom {
|
||||
background: var(--accent-primary);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.project-settings-checkbox-label input[type="checkbox"]:checked + .project-settings-checkbox-custom::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.project-settings-checkbox-label input[type="checkbox"]:focus + .project-settings-checkbox-custom {
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.project-settings-checkbox-label:hover .project-settings-checkbox-custom {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.project-settings-form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.project-settings-save-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 10px 18px;
|
||||
background: var(--accent-gradient);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.project-settings-save-button:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-sm), 0 0 20px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.project-settings-save-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.project-settings-button-spinner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: project-settings-spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
/* Danger Zone */
|
||||
.project-settings-danger-zone {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.project-settings-danger-zone h2 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--error);
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.project-settings-danger-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.project-settings-danger-info h3 {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.project-settings-danger-info p {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.8125rem;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.project-settings-delete-button {
|
||||
padding: 10px 18px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--error);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.project-settings-delete-button:hover:not(:disabled) {
|
||||
background: var(--error-bg);
|
||||
border-color: rgba(239, 68, 68, 0.5);
|
||||
}
|
||||
|
||||
.project-settings-delete-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Delete Confirmation */
|
||||
.project-settings-delete-confirm {
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(239, 68, 68, 0.2);
|
||||
animation: project-settings-fade-in 0.2s ease;
|
||||
}
|
||||
|
||||
.project-settings-delete-confirm p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.project-settings-delete-confirm strong {
|
||||
color: var(--text-primary);
|
||||
font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, monospace;
|
||||
background: var(--bg-tertiary);
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.project-settings-delete-confirm-input {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
transition: all var(--transition-fast);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.project-settings-delete-confirm-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--error);
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
|
||||
}
|
||||
|
||||
.project-settings-delete-confirm-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.project-settings-delete-confirm-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.project-settings-confirm-delete-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 10px 18px;
|
||||
background: var(--error);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.project-settings-confirm-delete-button:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.project-settings-confirm-delete-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.project-settings-cancel-button {
|
||||
padding: 10px 18px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.project-settings-cancel-button:hover:not(:disabled) {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.project-settings-cancel-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.project-settings-delete-spinner {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: project-settings-spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
/* Access denied */
|
||||
.project-settings-access-denied {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.project-settings-access-denied h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.project-settings-access-denied p {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.9375rem;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.project-settings-danger-item {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.project-settings-delete-button {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.project-settings-delete-confirm-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.project-settings-confirm-delete-button,
|
||||
.project-settings-cancel-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
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