feat: added artifect delete method in frontend and backend both.

Author: krishna9358

backend/src/storage/artifacts.controller.ts

@@ -1,5 +1,15 @@
-import { Controller, Get, Query, Param, Res, StreamableFile } from '@nestjs/common';
-import { ApiOkResponse, ApiTags } from '@nestjs/swagger';
+import {
+  Controller,
+  Get,
+  Delete,
+  Query,
+  Param,
+  Res,
+  StreamableFile,
+  HttpCode,
+  HttpStatus,
+} from '@nestjs/common';
+import { ApiOkResponse, ApiNoContentResponse, ApiTags } from '@nestjs/swagger';
 import { ZodValidationPipe } from 'nestjs-zod';
 import type { Response } from 'express';
 
@@ -60,4 +70,16 @@ export class ArtifactsController {
 
     return new StreamableFile(buffer);
   }
+
+  @Delete(':id')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  @ApiNoContentResponse({
+    description: 'Artifact deleted successfully',
+  })
+  async deleteArtifact(
+    @CurrentAuth() auth: AuthContext | null,
+    @Param(new ZodValidationPipe(ArtifactIdParamSchema)) params: ArtifactIdParamDto,
+  ) {
+    await this.artifactsService.deleteArtifact(auth, params.id);
+  }
 }

backend/src/storage/artifacts.repository.ts

@@ -88,6 +88,16 @@ export class ArtifactsRepository {
     return and(base, eq(artifactsTable.organizationId, organizationId));
   }
 
+  async delete(id: string, options: { organizationId?: string | null } = {}): Promise<boolean> {
+    const filters = [eq(artifactsTable.id, id)];
+    if (options.organizationId) {
+      filters.push(eq(artifactsTable.organizationId, options.organizationId));
+    }
+    const where = filters.length > 1 ? and(...filters) : filters[0];
+    const result = await this.db.delete(artifactsTable).where(where).returning();
+    return result.length > 0;
+  }
+
   private buildFilters(options: ArtifactQueryOptions) {
     const filters = [];
 

backend/src/storage/artifacts.service.ts

@@ -85,6 +85,25 @@ export class ArtifactsService {
     };
   }
 
+  async deleteArtifact(auth: AuthContext | null, artifactId: string): Promise<void> {
+    const artifact = await this.getArtifactRecord(auth, artifactId);
+    const organizationId = this.requireOrganizationId(auth);
+
+    // Delete the associated file first
+    try {
+      await this.filesService.deleteFile(auth, artifact.fileId);
+    } catch (error) {
+      // Log but don't fail if file is already deleted
+      console.warn(`Failed to delete file ${artifact.fileId} for artifact ${artifactId}:`, error);
+    }
+
+    // Delete the artifact record
+    const deleted = await this.repository.delete(artifactId, { organizationId });
+    if (!deleted) {
+      throw new NotFoundException(`Artifact ${artifactId} not found`);
+    }
+  }
+
   private toMetadata(record: ArtifactRecord): ArtifactMetadataDto {
     return {
       id: record.id,

frontend/src/pages/ArtifactLibrary.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Download, RefreshCw, Search, Copy, ExternalLink } from 'lucide-react';
+import { Download, RefreshCw, Search, Copy, ExternalLink, Trash2 } from 'lucide-react';
 import { useArtifactStore } from '@/store/artifactStore';
 import { api } from '@/services/api';
 import { Button } from '@/components/ui/button';
@@ -28,8 +28,16 @@ const formatTimestamp = (value: string) => {
 
 export function ArtifactLibrary() {
   const [searchQuery, setSearchQuery] = useState('');
-  const { library, libraryLoading, libraryError, fetchLibrary, downloadArtifact, downloading } =
-    useArtifactStore();
+  const {
+    library,
+    libraryLoading,
+    libraryError,
+    fetchLibrary,
+    downloadArtifact,
+    downloading,
+    deleteArtifact,
+    deleting,
+  } = useArtifactStore();
   const [copiedRemoteUri, setCopiedRemoteUri] = useState<string | null>(null);
   const [workflows, setWorkflows] = useState<Record<string, string>>({});
 
@@ -154,6 +162,8 @@ export function ArtifactLibrary() {
                     artifact={artifact}
                     workflowName={workflows[artifact.workflowId] || 'Unknown Workflow'}
                     onDownload={() => downloadArtifact(artifact)}
+                    onDelete={() => deleteArtifact(artifact.id)}
+                    isDeleting={Boolean(deleting[artifact.id])}
                     onCopyRemoteUri={async (uri: string) => {
                       try {
                         await navigator.clipboard.writeText(uri);
@@ -182,16 +192,20 @@ function ArtifactLibraryRow({
   artifact,
   workflowName,
   onDownload,
+  onDelete,
   onCopyRemoteUri,
   copiedRemoteUri,
   isDownloading,
+  isDeleting,
 }: {
   artifact: ArtifactMetadata;
   workflowName: string;
   onDownload: () => void;
+  onDelete: () => void;
   onCopyRemoteUri: (uri: string) => void;
   copiedRemoteUri: string | null;
   isDownloading: boolean;
+  isDeleting: boolean;
 }) {
   const remoteUploads = getRemoteUploads(artifact);
 
@@ -261,7 +275,7 @@ function ArtifactLibraryRow({
       </td>
       <td className="px-3 md:px-4 py-3 md:py-4 align-top text-left">
         <div className="flex flex-wrap justify-start gap-1 md:gap-2">
-          {/* <Button
+          <Button
             type="button"
             variant="ghost"
             size="sm"
@@ -271,10 +285,11 @@ function ArtifactLibraryRow({
                 onDelete();
               }
             }}
+            disabled={isDeleting}
           >
             <Trash2 className="h-4 w-4" />
-            <span className="hidden md:inline">Delete</span>
-          </Button> */}
+            <span className="hidden md:inline">{isDeleting ? 'Deleting…' : 'Delete'}</span>
+          </Button>
           <Button
             type="button"
             variant="ghost"

frontend/src/services/api.ts

@@ -808,6 +808,17 @@ export const api = {
       }
       return await response.blob();
     },
+
+    delete: async (id: string): Promise<void> => {
+      const headers = await getAuthHeaders();
+      const response = await fetch(`${API_BASE_URL}/api/v1/artifacts/${id}`, {
+        method: 'DELETE',
+        headers,
+      });
+      if (!response.ok) {
+        throw new Error('Failed to delete artifact');
+      }
+    },
   },
 
   humanInputs: {

frontend/src/store/artifactStore.ts

@@ -16,9 +16,11 @@ interface ArtifactStoreState {
   libraryError: string | null;
   libraryFilters?: ArtifactListFilters;
   downloading: Record<string, boolean>;
+  deleting: Record<string, boolean>;
   fetchRunArtifacts: (runId: string, force?: boolean) => Promise<void>;
   fetchLibrary: (filters?: ArtifactListFilters) => Promise<void>;
   downloadArtifact: (artifact: ArtifactMetadata, options?: { runId?: string }) => Promise<void>;
+  deleteArtifact: (artifactId: string) => Promise<void>;
 }
 
 export const useArtifactStore = create<ArtifactStoreState>((set, get) => ({
@@ -27,6 +29,7 @@ export const useArtifactStore = create<ArtifactStoreState>((set, get) => ({
   libraryLoading: false,
   libraryError: null,
   downloading: {},
+  deleting: {},
   async fetchRunArtifacts(runId: string, force = false) {
     const existing = get().runArtifacts[runId];
     if (!force && existing && !existing.error && existing.artifacts.length > 0) {
@@ -113,4 +116,24 @@ export const useArtifactStore = create<ArtifactStoreState>((set, get) => ({
       });
     }
   },
+  async deleteArtifact(artifactId: string) {
+    set((state) => ({
+      deleting: { ...state.deleting, [artifactId]: true },
+    }));
+    try {
+      await api.artifacts.delete(artifactId);
+      // Remove artifact from library after successful deletion
+      set((state) => ({
+        library: state.library.filter((a) => a.id !== artifactId),
+      }));
+    } catch (error) {
+      console.error('Failed to delete artifact', error);
+      throw error;
+    } finally {
+      set((state) => {
+        const { [artifactId]: _removed, ...next } = state.deleting;
+        return { deleting: next };
+      });
+    }
+  },
 }));