Add separate version tracking for artifacts

2026-01-16 11:36:08 -06:00
parent a98ac154d5
commit b93d5a9c68
15 changed files with 1366 additions and 34 deletions
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -32,6 +32,7 @@ import {
  OIDCConfig,
  OIDCConfigUpdate,
  OIDCStatus,
+  PackageVersion,
 } from './types';

 const API_BASE = '/api/v1';
@@ -239,12 +240,21 @@ export async function listPackageArtifacts(
 }

 // Upload
-export async function uploadArtifact(projectName: string, packageName: string, file: File, tag?: string): Promise<UploadResponse> {
+export async function uploadArtifact(
+  projectName: string,
+  packageName: string,
+  file: File,
+  tag?: string,
+  version?: string
+): Promise<UploadResponse> {
  const formData = new FormData();
  formData.append('file', file);
  if (tag) {
    formData.append('tag', tag);
  }
+  if (version) {
+    formData.append('version', version);
+  }

  const response = await fetch(`${API_BASE}/project/${projectName}/${packageName}/upload`, {
    method: 'POST',
@@ -443,3 +453,38 @@ export function getOIDCLoginUrl(returnTo?: string): string {
  const query = params.toString();
  return `${API_BASE}/auth/oidc/login${query ? `?${query}` : ''}`;
 }
+
+// Version API
+export async function listVersions(
+  projectName: string,
+  packageName: string,
+  params: ListParams = {}
+): Promise<PaginatedResponse<PackageVersion>> {
+  const query = buildQueryString(params as Record<string, unknown>);
+  const response = await fetch(`${API_BASE}/project/${projectName}/${packageName}/versions${query}`);
+  return handleResponse<PaginatedResponse<PackageVersion>>(response);
+}
+
+export async function getVersion(
+  projectName: string,
+  packageName: string,
+  version: string
+): Promise<PackageVersion> {
+  const response = await fetch(`${API_BASE}/project/${projectName}/${packageName}/versions/${version}`);
+  return handleResponse<PackageVersion>(response);
+}
+
+export async function deleteVersion(
+  projectName: string,
+  packageName: string,
+  version: string
+): Promise<void> {
+  const response = await fetch(`${API_BASE}/project/${projectName}/${packageName}/versions/${version}`, {
+    method: 'DELETE',
+    credentials: 'include',
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ detail: 'Unknown error' }));
+    throw new Error(error.detail || `HTTP ${response.status}`);
+  }
+}
--- a/frontend/src/pages/PackagePage.css
+++ b/frontend/src/pages/PackagePage.css
@@ -324,6 +324,86 @@ tr:hover .copy-btn {
  color: var(--text-muted);
 }

+/* Version badge */
+.version-badge {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.8125rem;
+  color: var(--accent-primary);
+  background: rgba(16, 185, 129, 0.1);
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+}
+
+/* Create Tag Section */
+.create-tag-section {
+  margin-top: 32px;
+  background: var(--bg-secondary);
+}
+
+.create-tag-section h3 {
+  margin-bottom: 4px;
+  color: var(--text-primary);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.section-description {
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  margin-bottom: 16px;
+}
+
+.create-tag-form .form-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.create-tag-form .form-group {
+  flex: 1;
+  min-width: 150px;
+}
+
+.create-tag-form .form-group--wide {
+  flex: 2;
+  min-width: 300px;
+}
+
+.create-tag-form .form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.create-tag-form .form-group input {
+  width: 100%;
+  padding: 10px 14px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+}
+
+.create-tag-form .form-group input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+}
+
+.create-tag-form .form-group input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.create-tag-form button {
+  flex-shrink: 0;
+}
+
 /* Created cell */
 .created-cell {
  display: flex;
--- a/frontend/src/pages/PackagePage.tsx
+++ b/frontend/src/pages/PackagePage.tsx
@@ -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, UnauthorizedError, ForbiddenError } from '../api';
+import { listTags, getDownloadUrl, getPackage, getMyProjectAccess, createTag, UnauthorizedError, ForbiddenError } from '../api';
 import { Breadcrumb } from '../components/Breadcrumb';
 import { Badge } from '../components/Badge';
 import { SearchInput } from '../components/SearchInput';
@@ -64,6 +64,9 @@ function PackagePage() {
  const [uploadSuccess, setUploadSuccess] = useState<string | null>(null);
  const [artifactIdInput, setArtifactIdInput] = useState('');
  const [accessLevel, setAccessLevel] = useState<AccessLevel | null>(null);
+  const [createTagName, setCreateTagName] = useState('');
+  const [createTagArtifactId, setCreateTagArtifactId] = useState('');
+  const [createTagLoading, setCreateTagLoading] = useState(false);

  // Derived permissions
  const canWrite = accessLevel === 'write' || accessLevel === 'admin';
@@ -154,6 +157,30 @@ function PackagePage() {
    setError(errorMsg);
  }, []);

+  const handleCreateTag = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!createTagName.trim() || createTagArtifactId.length !== 64) return;
+
+    setCreateTagLoading(true);
+    setError(null);
+
+    try {
+      await createTag(projectName!, packageName!, {
+        name: createTagName.trim(),
+        artifact_id: createTagArtifactId,
+      });
+      setUploadSuccess(`Tag "${createTagName}" created successfully!`);
+      setCreateTagName('');
+      setCreateTagArtifactId('');
+      loadData();
+      setTimeout(() => setUploadSuccess(null), 5000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create tag');
+    } finally {
+      setCreateTagLoading(false);
+    }
+  };
+
  const handleSearchChange = (value: string) => {
    updateParams({ search: value, page: '1' });
  };
@@ -182,6 +209,13 @@ function PackagePage() {
      sortable: true,
      render: (t: TagDetail) => <strong>{t.name}</strong>,
    },
+    {
+      key: 'version',
+      header: 'Version',
+      render: (t: TagDetail) => (
+        <span className="version-badge">{t.version || '-'}</span>
+      ),
+    },
    {
      key: 'artifact_id',
      header: 'Artifact ID',
@@ -433,6 +467,50 @@ function PackagePage() {
        )}
      </div>

+      {user && canWrite && (
+        <div className="create-tag-section card">
+          <h3>Create / Update Tag</h3>
+          <p className="section-description">Point a tag at any existing artifact by its ID</p>
+          <form onSubmit={handleCreateTag} className="create-tag-form">
+            <div className="form-row">
+              <div className="form-group">
+                <label htmlFor="create-tag-name">Tag Name</label>
+                <input
+                  id="create-tag-name"
+                  type="text"
+                  value={createTagName}
+                  onChange={(e) => setCreateTagName(e.target.value)}
+                  placeholder="latest, stable, v1.0.0..."
+                  disabled={createTagLoading}
+                />
+              </div>
+              <div className="form-group form-group--wide">
+                <label htmlFor="create-tag-artifact">Artifact ID</label>
+                <input
+                  id="create-tag-artifact"
+                  type="text"
+                  value={createTagArtifactId}
+                  onChange={(e) => setCreateTagArtifactId(e.target.value.toLowerCase().replace(/[^a-f0-9]/g, '').slice(0, 64))}
+                  placeholder="SHA256 hash (64 hex characters)"
+                  className="artifact-id-input"
+                  disabled={createTagLoading}
+                />
+              </div>
+              <button
+                type="submit"
+                className="btn btn-primary"
+                disabled={createTagLoading || !createTagName.trim() || createTagArtifactId.length !== 64}
+              >
+                {createTagLoading ? 'Creating...' : 'Create Tag'}
+              </button>
+            </div>
+            {createTagArtifactId.length > 0 && createTagArtifactId.length !== 64 && (
+              <p className="validation-hint">Artifact ID must be exactly 64 hex characters ({createTagArtifactId.length}/64)</p>
+            )}
+          </form>
+        </div>
+      )}
+
      <div className="usage-section card">
        <h3>Usage</h3>
        <p>Download artifacts using:</p>
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -63,6 +63,22 @@ export interface TagDetail extends Tag {
  artifact_original_name: string | null;
  artifact_created_at: string;
  artifact_format_metadata: Record<string, unknown> | null;
+  version: string | null;
+}
+
+export interface PackageVersion {
+  id: string;
+  package_id: string;
+  artifact_id: string;
+  version: string;
+  version_source: string | null;
+  created_at: string;
+  created_by: string;
+  // Enriched fields from joins
+  size?: number;
+  content_type?: string | null;
+  original_name?: string | null;
+  tags?: string[];
 }

 export interface ArtifactTagInfo {
@@ -122,6 +138,8 @@ export interface UploadResponse {
  project: string;
  package: string;
  tag: string | null;
+  version: string | null;
+  version_source: string | null;
 }

 // Global search types