Add package dependencies system and project settings page
This commit is contained in:
Mondo Diaz
@@ -10,6 +10,7 @@ import ChangePasswordPage from './pages/ChangePasswordPage';
|
||||
import APIKeysPage from './pages/APIKeysPage';
|
||||
import AdminUsersPage from './pages/AdminUsersPage';
|
||||
import AdminOIDCPage from './pages/AdminOIDCPage';
|
||||
import ProjectSettingsPage from './pages/ProjectSettingsPage';
|
||||
|
||||
// Component that checks if user must change password
|
||||
function RequirePasswordChange({ children }: { children: React.ReactNode }) {
|
||||
@@ -45,6 +46,7 @@ function AppRoutes() {
|
||||
<Route path="/admin/users" element={<AdminUsersPage />} />
|
||||
<Route path="/admin/oidc" element={<AdminOIDCPage />} />
|
||||
<Route path="/project/:projectName" element={<ProjectPage />} />
|
||||
<Route path="/project/:projectName/settings" element={<ProjectSettingsPage />} />
|
||||
<Route path="/project/:projectName/:packageName" element={<PackagePage />} />
|
||||
</Routes>
|
||||
</Layout>
|
||||
|
||||
@@ -33,6 +33,9 @@ import {
|
||||
OIDCConfigUpdate,
|
||||
OIDCStatus,
|
||||
PackageVersion,
|
||||
ArtifactDependenciesResponse,
|
||||
ReverseDependenciesResponse,
|
||||
DependencyResolutionResponse,
|
||||
} from './types';
|
||||
|
||||
const API_BASE = '/api/v1';
|
||||
@@ -171,6 +174,30 @@ export async function getProject(name: string): Promise<Project> {
|
||||
return handleResponse<Project>(response);
|
||||
}
|
||||
|
||||
export async function updateProject(
|
||||
projectName: string,
|
||||
data: { description?: string; is_public?: boolean }
|
||||
): Promise<Project> {
|
||||
const response = await fetch(`${API_BASE}/projects/${projectName}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
credentials: 'include',
|
||||
});
|
||||
return handleResponse<Project>(response);
|
||||
}
|
||||
|
||||
export async function deleteProject(projectName: string): Promise<void> {
|
||||
const response = await fetch(`${API_BASE}/projects/${projectName}`, {
|
||||
method: 'DELETE',
|
||||
credentials: 'include',
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: 'Unknown error' }));
|
||||
throw new Error(error.detail || `HTTP ${response.status}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Package API
|
||||
export async function listPackages(projectName: string, params: PackageListParams = {}): Promise<PaginatedResponse<Package>> {
|
||||
const query = buildQueryString(params as Record<string, unknown>);
|
||||
@@ -488,3 +515,50 @@ export async function deleteVersion(
|
||||
throw new Error(error.detail || `HTTP ${response.status}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Dependency API
|
||||
export async function getArtifactDependencies(artifactId: string): Promise<ArtifactDependenciesResponse> {
|
||||
const response = await fetch(`${API_BASE}/artifact/${artifactId}/dependencies`);
|
||||
return handleResponse<ArtifactDependenciesResponse>(response);
|
||||
}
|
||||
|
||||
export async function getDependenciesByRef(
|
||||
projectName: string,
|
||||
packageName: string,
|
||||
ref: string
|
||||
): Promise<ArtifactDependenciesResponse> {
|
||||
const response = await fetch(`${API_BASE}/project/${projectName}/${packageName}/+/${ref}/dependencies`);
|
||||
return handleResponse<ArtifactDependenciesResponse>(response);
|
||||
}
|
||||
|
||||
export async function getReverseDependencies(
|
||||
projectName: string,
|
||||
packageName: string,
|
||||
params: { page?: number; limit?: number } = {}
|
||||
): Promise<ReverseDependenciesResponse> {
|
||||
const query = buildQueryString(params as Record<string, unknown>);
|
||||
const response = await fetch(`${API_BASE}/project/${projectName}/${packageName}/reverse-dependencies${query}`);
|
||||
return handleResponse<ReverseDependenciesResponse>(response);
|
||||
}
|
||||
|
||||
export async function resolveDependencies(
|
||||
projectName: string,
|
||||
packageName: string,
|
||||
ref: string
|
||||
): Promise<DependencyResolutionResponse> {
|
||||
const response = await fetch(`${API_BASE}/project/${projectName}/${packageName}/+/${ref}/resolve`);
|
||||
return handleResponse<DependencyResolutionResponse>(response);
|
||||
}
|
||||
|
||||
export async function getEnsureFile(
|
||||
projectName: string,
|
||||
packageName: string,
|
||||
ref: string
|
||||
): Promise<string> {
|
||||
const response = await fetch(`${API_BASE}/project/${projectName}/${packageName}/+/${ref}/ensure`);
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: 'Unknown error' }));
|
||||
throw new ApiError(error.detail || `HTTP ${response.status}`, response.status);
|
||||
}
|
||||
return response.text();
|
||||
}
|
||||
|
||||
338
frontend/src/components/DependencyGraph.css
Normal file
338
frontend/src/components/DependencyGraph.css
Normal file
@@ -0,0 +1,338 @@
|
||||
/* Dependency Graph Modal */
|
||||
.dependency-graph-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.dependency-graph-content {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dependency-graph-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.dependency-graph-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dependency-graph-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.graph-stats {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dependency-graph-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.zoom-level {
|
||||
margin-left: auto;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--text-muted);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.dependency-graph-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(90deg, var(--border-primary) 1px, transparent 1px),
|
||||
linear-gradient(var(--border-primary) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.graph-canvas {
|
||||
padding: 40px;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
transform-origin: center center;
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
|
||||
/* Graph Nodes */
|
||||
.graph-node-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.graph-node {
|
||||
background: var(--bg-tertiary);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 16px;
|
||||
min-width: 200px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-node:hover {
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.graph-node--root {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.graph-node--hovered {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.graph-node__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.graph-node__name {
|
||||
font-weight: 600;
|
||||
color: var(--accent-primary);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.graph-node__toggle {
|
||||
background: var(--bg-hover);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.graph-node__toggle:hover {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.graph-node__details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.graph-node__version {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.graph-node__size {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Graph Children / Tree Structure */
|
||||
.graph-children {
|
||||
display: flex;
|
||||
padding-left: 24px;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-connector {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
bottom: 50%;
|
||||
width: 12px;
|
||||
border-left: 2px solid var(--border-primary);
|
||||
border-bottom: 2px solid var(--border-primary);
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
|
||||
.graph-children-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-children-list::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 20px;
|
||||
bottom: 20px;
|
||||
border-left: 2px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.graph-children-list > .graph-node-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-children-list > .graph-node-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 20px;
|
||||
width: 12px;
|
||||
border-top: 2px solid var(--border-primary);
|
||||
}
|
||||
|
||||
/* Loading, Error, Empty States */
|
||||
.graph-loading,
|
||||
.graph-error,
|
||||
.graph-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.graph-loading .spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid var(--border-primary);
|
||||
border-top-color: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.graph-error {
|
||||
color: var(--error-color, #ef4444);
|
||||
}
|
||||
|
||||
.graph-error svg {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.graph-error p {
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
.graph-tooltip {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 16px;
|
||||
font-size: 0.8125rem;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.graph-tooltip strong {
|
||||
display: block;
|
||||
color: var(--accent-primary);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.graph-tooltip div {
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.tooltip-hint {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.dependency-graph-modal {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dependency-graph-content {
|
||||
height: 100vh;
|
||||
border-radius: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.dependency-graph-header {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dependency-graph-info {
|
||||
flex-basis: 100%;
|
||||
order: 3;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
323
frontend/src/components/DependencyGraph.tsx
Normal file
323
frontend/src/components/DependencyGraph.tsx
Normal file
@@ -0,0 +1,323 @@
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { ResolvedArtifact, DependencyResolutionResponse, Dependency } from '../types';
|
||||
import { resolveDependencies, getArtifactDependencies } from '../api';
|
||||
import './DependencyGraph.css';
|
||||
|
||||
interface DependencyGraphProps {
|
||||
projectName: string;
|
||||
packageName: string;
|
||||
tagName: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface GraphNode {
|
||||
id: string;
|
||||
project: string;
|
||||
package: string;
|
||||
version: string | null;
|
||||
size: number;
|
||||
depth: number;
|
||||
children: GraphNode[];
|
||||
isRoot?: boolean;
|
||||
}
|
||||
|
||||
function formatBytes(bytes: number): string {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
function DependencyGraph({ projectName, packageName, tagName, onClose }: DependencyGraphProps) {
|
||||
const navigate = useNavigate();
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [resolution, setResolution] = useState<DependencyResolutionResponse | null>(null);
|
||||
const [graphRoot, setGraphRoot] = useState<GraphNode | null>(null);
|
||||
const [hoveredNode, setHoveredNode] = useState<GraphNode | null>(null);
|
||||
const [zoom, setZoom] = useState(1);
|
||||
const [pan, setPan] = useState({ x: 0, y: 0 });
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
|
||||
const [collapsedNodes, setCollapsedNodes] = useState<Set<string>>(new Set());
|
||||
|
||||
// Build graph structure from resolution data
|
||||
const buildGraph = useCallback(async (resolutionData: DependencyResolutionResponse) => {
|
||||
const artifactMap = new Map<string, ResolvedArtifact>();
|
||||
resolutionData.resolved.forEach(artifact => {
|
||||
artifactMap.set(artifact.artifact_id, artifact);
|
||||
});
|
||||
|
||||
// Fetch dependencies for each artifact to build the tree
|
||||
const depsMap = new Map<string, Dependency[]>();
|
||||
|
||||
for (const artifact of resolutionData.resolved) {
|
||||
try {
|
||||
const deps = await getArtifactDependencies(artifact.artifact_id);
|
||||
depsMap.set(artifact.artifact_id, deps.dependencies);
|
||||
} catch {
|
||||
depsMap.set(artifact.artifact_id, []);
|
||||
}
|
||||
}
|
||||
|
||||
// Find the root artifact (the requested one)
|
||||
const rootArtifact = resolutionData.resolved.find(
|
||||
a => a.project === resolutionData.requested.project &&
|
||||
a.package === resolutionData.requested.package
|
||||
);
|
||||
|
||||
if (!rootArtifact) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Build tree recursively
|
||||
const visited = new Set<string>();
|
||||
|
||||
const buildNode = (artifact: ResolvedArtifact, depth: number): GraphNode => {
|
||||
const nodeId = `${artifact.project}/${artifact.package}`;
|
||||
visited.add(artifact.artifact_id);
|
||||
|
||||
const deps = depsMap.get(artifact.artifact_id) || [];
|
||||
const children: GraphNode[] = [];
|
||||
|
||||
for (const dep of deps) {
|
||||
// Find the resolved artifact for this dependency
|
||||
const childArtifact = resolutionData.resolved.find(
|
||||
a => a.project === dep.project && a.package === dep.package
|
||||
);
|
||||
|
||||
if (childArtifact && !visited.has(childArtifact.artifact_id)) {
|
||||
children.push(buildNode(childArtifact, depth + 1));
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
id: nodeId,
|
||||
project: artifact.project,
|
||||
package: artifact.package,
|
||||
version: artifact.version || artifact.tag,
|
||||
size: artifact.size,
|
||||
depth,
|
||||
children,
|
||||
isRoot: depth === 0,
|
||||
};
|
||||
};
|
||||
|
||||
return buildNode(rootArtifact, 0);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadData() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const result = await resolveDependencies(projectName, packageName, tagName);
|
||||
setResolution(result);
|
||||
|
||||
const graph = await buildGraph(result);
|
||||
setGraphRoot(graph);
|
||||
} catch (err) {
|
||||
if (err instanceof Error) {
|
||||
// Check if it's a resolution error
|
||||
try {
|
||||
const errorData = JSON.parse(err.message);
|
||||
if (errorData.error === 'circular_dependency') {
|
||||
setError(`Circular dependency detected: ${errorData.cycle?.join(' → ')}`);
|
||||
} else if (errorData.error === 'dependency_conflict') {
|
||||
setError(`Dependency conflict: ${errorData.message}`);
|
||||
} else {
|
||||
setError(err.message);
|
||||
}
|
||||
} catch {
|
||||
setError(err.message);
|
||||
}
|
||||
} else {
|
||||
setError('Failed to load dependency graph');
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
loadData();
|
||||
}, [projectName, packageName, tagName, buildGraph]);
|
||||
|
||||
const handleNodeClick = (node: GraphNode) => {
|
||||
navigate(`/project/${node.project}/${node.package}`);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleNodeToggle = (node: GraphNode, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setCollapsedNodes(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(node.id)) {
|
||||
next.delete(node.id);
|
||||
} else {
|
||||
next.add(node.id);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleWheel = (e: React.WheelEvent) => {
|
||||
e.preventDefault();
|
||||
const delta = e.deltaY > 0 ? -0.1 : 0.1;
|
||||
setZoom(z => Math.max(0.25, Math.min(2, z + delta)));
|
||||
};
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent) => {
|
||||
if (e.target === containerRef.current || (e.target as HTMLElement).classList.contains('graph-canvas')) {
|
||||
setIsDragging(true);
|
||||
setDragStart({ x: e.clientX - pan.x, y: e.clientY - pan.y });
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent) => {
|
||||
if (isDragging) {
|
||||
setPan({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y });
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const resetView = () => {
|
||||
setZoom(1);
|
||||
setPan({ x: 0, y: 0 });
|
||||
};
|
||||
|
||||
const renderNode = (node: GraphNode, index: number = 0): JSX.Element => {
|
||||
const isCollapsed = collapsedNodes.has(node.id);
|
||||
const hasChildren = node.children.length > 0;
|
||||
|
||||
return (
|
||||
<div key={`${node.id}-${index}`} className="graph-node-container">
|
||||
<div
|
||||
className={`graph-node ${node.isRoot ? 'graph-node--root' : ''} ${hoveredNode?.id === node.id ? 'graph-node--hovered' : ''}`}
|
||||
onClick={() => handleNodeClick(node)}
|
||||
onMouseEnter={() => setHoveredNode(node)}
|
||||
onMouseLeave={() => setHoveredNode(null)}
|
||||
>
|
||||
<div className="graph-node__header">
|
||||
<span className="graph-node__name">{node.project}/{node.package}</span>
|
||||
{hasChildren && (
|
||||
<button
|
||||
className="graph-node__toggle"
|
||||
onClick={(e) => handleNodeToggle(node, e)}
|
||||
title={isCollapsed ? 'Expand' : 'Collapse'}
|
||||
>
|
||||
{isCollapsed ? '+' : '-'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="graph-node__details">
|
||||
{node.version && <span className="graph-node__version">@ {node.version}</span>}
|
||||
<span className="graph-node__size">{formatBytes(node.size)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hasChildren && !isCollapsed && (
|
||||
<div className="graph-children">
|
||||
<div className="graph-connector"></div>
|
||||
<div className="graph-children-list">
|
||||
{node.children.map((child, i) => renderNode(child, i))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dependency-graph-modal" onClick={onClose}>
|
||||
<div className="dependency-graph-content" onClick={e => e.stopPropagation()}>
|
||||
<div className="dependency-graph-header">
|
||||
<h2>Dependency Graph</h2>
|
||||
<div className="dependency-graph-info">
|
||||
<span>{projectName}/{packageName} @ {tagName}</span>
|
||||
{resolution && (
|
||||
<span className="graph-stats">
|
||||
{resolution.artifact_count} packages • {formatBytes(resolution.total_size)} total
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button className="close-btn" onClick={onClose} 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 className="dependency-graph-toolbar">
|
||||
<button className="btn btn-secondary btn-small" onClick={() => setZoom(z => Math.min(2, z + 0.25))}>
|
||||
Zoom In
|
||||
</button>
|
||||
<button className="btn btn-secondary btn-small" onClick={() => setZoom(z => Math.max(0.25, z - 0.25))}>
|
||||
Zoom Out
|
||||
</button>
|
||||
<button className="btn btn-secondary btn-small" onClick={resetView}>
|
||||
Reset View
|
||||
</button>
|
||||
<span className="zoom-level">{Math.round(zoom * 100)}%</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="dependency-graph-container"
|
||||
onWheel={handleWheel}
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseUp}
|
||||
>
|
||||
{loading ? (
|
||||
<div className="graph-loading">
|
||||
<div className="spinner"></div>
|
||||
<span>Resolving dependencies...</span>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="graph-error">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="8" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
||||
</svg>
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
) : graphRoot ? (
|
||||
<div
|
||||
className="graph-canvas"
|
||||
style={{
|
||||
transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
|
||||
cursor: isDragging ? 'grabbing' : 'grab',
|
||||
}}
|
||||
>
|
||||
{renderNode(graphRoot)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="graph-empty">No dependencies to display</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hoveredNode && (
|
||||
<div className="graph-tooltip">
|
||||
<strong>{hoveredNode.project}/{hoveredNode.package}</strong>
|
||||
{hoveredNode.version && <div>Version: {hoveredNode.version}</div>}
|
||||
<div>Size: {formatBytes(hoveredNode.size)}</div>
|
||||
<div className="tooltip-hint">Click to navigate</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DependencyGraph;
|
||||
@@ -193,7 +193,6 @@ function Layout({ children }: LayoutProps) {
|
||||
</div>
|
||||
<div className="footer-links">
|
||||
<a href="/docs">Documentation</a>
|
||||
<a href="/api/v1">API</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -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;
|
||||
@@ -373,3 +373,77 @@ export interface OIDCStatus {
|
||||
enabled: boolean;
|
||||
issuer_url?: string;
|
||||
}
|
||||
|
||||
// Dependency types
|
||||
export interface Dependency {
|
||||
id: string;
|
||||
artifact_id: string;
|
||||
project: string;
|
||||
package: string;
|
||||
version: string | null;
|
||||
tag: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface ArtifactDependenciesResponse {
|
||||
artifact_id: string;
|
||||
dependencies: Dependency[];
|
||||
}
|
||||
|
||||
export interface DependentInfo {
|
||||
artifact_id: string;
|
||||
project: string;
|
||||
package: string;
|
||||
version: string | null;
|
||||
constraint_type: 'version' | 'tag';
|
||||
constraint_value: string;
|
||||
}
|
||||
|
||||
export interface ReverseDependenciesResponse {
|
||||
project: string;
|
||||
package: string;
|
||||
dependents: DependentInfo[];
|
||||
pagination: {
|
||||
page: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
total_pages: number;
|
||||
has_more: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
// Dependency Resolution types
|
||||
export interface ResolvedArtifact {
|
||||
artifact_id: string;
|
||||
project: string;
|
||||
package: string;
|
||||
version: string | null;
|
||||
tag: string | null;
|
||||
size: number;
|
||||
download_url: string;
|
||||
}
|
||||
|
||||
export interface DependencyResolutionResponse {
|
||||
requested: {
|
||||
project: string;
|
||||
package: string;
|
||||
ref: string;
|
||||
};
|
||||
resolved: ResolvedArtifact[];
|
||||
total_size: number;
|
||||
artifact_count: number;
|
||||
}
|
||||
|
||||
export interface DependencyResolutionError {
|
||||
error: 'circular_dependency' | 'dependency_conflict' | 'not_found';
|
||||
message: string;
|
||||
cycle?: string[];
|
||||
conflicts?: Array<{
|
||||
project: string;
|
||||
package: string;
|
||||
requirements: Array<{
|
||||
version: string;
|
||||
required_by: Array<{ path: string }>;
|
||||
}>;
|
||||
}>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user