insforge 0.3.2 → 1.2.10

package/frontend/src/features/storage/components/StorageDataGrid.tsx

@@ -6,8 +6,8 @@ import {
   type RenderCellProps,
   type DataGridColumn,
   type DataGridRowType,
-} from '@/components/datagrid';
-import { Button } from '@/components/radix/Button';
+  Button,
+} from '@/components';
 import { Download, Eye, Trash2, Image, FileText, Music, Video, Archive, File } from 'lucide-react';
 import { StorageFileSchema } from '@insforge/shared-schemas';
 
@@ -135,6 +135,7 @@ export function createStorageColumns(
     columns.push({
       key: 'actions',
       name: '',
+      minWidth: 120,
       maxWidth: 120,
       resizable: false,
       sortable: false,
@@ -178,7 +179,7 @@ export function createStorageColumns(
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-8 w-8 hover:bg-red-50"
+                className="h-8 w-8"
                 onClick={(e) => {
                   e.stopPropagation();
                   onDelete(row as StorageFileSchema);

package/frontend/src/features/storage/components/StorageManager.tsx

@@ -1,12 +1,10 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
-import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
 import { Folder } from 'lucide-react';
-import { storageService } from '@/features/storage/services/storage.service';
+import { useStorage } from '@/features/storage/hooks/useStorage';
 import { StorageFileSchema } from '@insforge/shared-schemas';
-import { LoadingState, ErrorState, EmptyState } from '@/components';
+import { LoadingState, ErrorState, EmptyState, ConfirmDialog, ConnectCTA } from '@/components';
 import { StorageDataGrid } from './StorageDataGrid';
 import { FilePreviewDialog } from './FilePreviewDialog';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
 import { useConfirm } from '@/lib/hooks/useConfirm';
 import { useToast } from '@/lib/hooks/useToast';
 import { SortColumn } from 'react-data-grid';
@@ -28,7 +26,6 @@ export function StorageManager({
   onSelectedFilesChange,
   isRefreshing = false,
 }: StorageManagerProps) {
-  const queryClient = useQueryClient();
   const [downloadingFiles, setDownloadingFiles] = useState<Set<string>>(new Set());
   const [previewFile, setPreviewFile] = useState<StorageFileSchema | null>(null);
   const [showPreviewDialog, setShowPreviewDialog] = useState(false);
@@ -45,25 +42,21 @@ export function StorageManager({
     setCurrentPage(1);
   }, [searchQuery, bucketName]);
 
+  const { useListObjects, deleteObjects, downloadObject } = useStorage();
+
   // Fetch objects in selected bucket
   const {
     data: objectsData,
     isLoading: objectsLoading,
     error: objectsError,
-  } = useQuery({
-    queryKey: ['storage', 'objects', bucketName, currentPage, pageSize, searchQuery],
-    queryFn: () =>
-      storageService.listObjects(
-        bucketName,
-        {
-          limit: pageSize,
-          offset: (currentPage - 1) * pageSize,
-        },
-        searchQuery
-      ),
-    enabled: !!bucketName,
-    placeholderData: (previousData) => previousData, // Keep previous data while loading
-  });
+  } = useListObjects(
+    bucketName,
+    {
+      limit: pageSize,
+      offset: (currentPage - 1) * pageSize,
+    },
+    searchQuery
+  );
 
   // Calculate pagination from backend response
   const totalPages = useMemo(() => {
@@ -71,22 +64,13 @@ export function StorageManager({
     return Math.ceil(total / pageSize);
   }, [objectsData?.pagination.total, fileCount, pageSize]);
 
-  // Delete mutation
-  const deleteMutation = useMutation({
-    mutationFn: ({ bucket, key }: { bucket: string; key: string }) =>
-      storageService.deleteObject(bucket, key),
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ['storage'] });
-    },
-  });
-
   // No need for client-side filtering - backend handles search
   // Just apply sorting
   const processedFiles = useMemo(() => {
     let files = objectsData?.objects || [];
 
     // Apply sorting
-    if (sortColumns.length > 0) {
+    if (sortColumns.length) {
       const sortColumn = sortColumns[0];
       files = [...files].sort((a, b) => {
         const aValue = a[sortColumn.columnKey as keyof StorageFileSchema];
@@ -115,7 +99,7 @@ export function StorageManager({
     async (file: StorageFileSchema) => {
       setDownloadingFiles((prev) => new Set(prev).add(file.key));
       try {
-        const blob = await storageService.downloadObject(bucketName, file.key);
+        const blob = await downloadObject(bucketName, file.key);
 
         // Create download link
         const url = window.URL.createObjectURL(blob);
@@ -137,7 +121,7 @@ export function StorageManager({
         });
       }
     },
-    [bucketName, showToast]
+    [bucketName, downloadObject, showToast]
   );
 
   const handlePreview = useCallback((file: StorageFileSchema) => {
@@ -157,10 +141,10 @@ export function StorageManager({
       const shouldDelete = await confirm(confirmOptions);
 
       if (shouldDelete) {
-        deleteMutation.mutate({ bucket: bucketName, key: file.key });
+        deleteObjects({ bucket: bucketName, keys: [file.key] });
       }
     },
-    [bucketName, confirm, deleteMutation]
+    [bucketName, confirm, deleteObjects]
   );
 
   const isDownloading = useCallback(
@@ -217,7 +201,12 @@ export function StorageManager({
           onDownload={(file) => void handleDownload(file)}
           onDelete={(file) => void handleDelete(file)}
           isDownloading={isDownloading}
-          emptyStateTitle={searchQuery ? 'No files match your search criteria' : 'No files found'}
+          emptyState={
+            <div className="text-sm text-zinc-500 dark:text-zinc-400">
+              {searchQuery ? 'No files match your search criteria' : 'No files found'}.{' '}
+              <ConnectCTA />
+            </div>
+          }
         />
       </div>
 

package/frontend/src/features/storage/components/index.ts

@@ -0,0 +1,12 @@
+export { BucketEmptyState } from './BucketEmptyState';
+export { BucketFormDialog } from './BucketFormDialog';
+export { BucketListSkeleton } from './BucketListSkeleton';
+export { FilePreviewDialog } from './FilePreviewDialog';
+export {
+  createStorageColumns,
+  StorageDataGrid,
+  type StorageDataGridProps,
+} from './StorageDataGrid';
+export { StorageManager } from './StorageManager';
+export { StorageSidebar } from './StorageSidebar';
+export { useUploadToast } from './UploadToast';

package/frontend/src/features/storage/hooks/useStorage.ts

@@ -0,0 +1,208 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { storageService, type ListObjectsParams } from '../services/storage.service';
+import { useToast } from '@/lib/hooks/useToast';
+
+export function useStorage() {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+
+  // Query to fetch all buckets
+  const {
+    data: buckets,
+    isLoading: isLoadingBuckets,
+    error: bucketsError,
+    refetch: refetchBuckets,
+  } = useQuery({
+    queryKey: ['storage', 'buckets'],
+    queryFn: () => storageService.listBuckets(),
+  });
+
+  // Hook to fetch objects in a bucket
+  const useListObjects = (
+    bucketName: string,
+    params?: ListObjectsParams,
+    searchQuery?: string,
+    enabled = true
+  ) => {
+    return useQuery({
+      queryKey: ['storage', 'objects', bucketName, params?.limit, params?.offset, searchQuery],
+      queryFn: () => storageService.listObjects(bucketName, params, searchQuery),
+      enabled: enabled && !!bucketName,
+      placeholderData: (previousData) => previousData,
+    });
+  };
+
+  // Query to fetch bucket statistics
+  const useBucketStats = (enabled = true) => {
+    return useQuery({
+      queryKey: ['storage', 'bucket-stats', buckets],
+      queryFn: async () => {
+        const stats: Record<
+          string,
+          { fileCount: number; totalSize: number; public: boolean; createdAt?: string }
+        > = {};
+        const currentBuckets = buckets || [];
+        const promises = currentBuckets.map(async (bucket) => {
+          try {
+            const result = await storageService.listObjects(bucket.name, { limit: 1000 });
+            const objects = result.objects;
+            const totalSize = objects.reduce((sum, file) => sum + file.size, 0);
+            return {
+              bucketName: bucket.name,
+              stats: {
+                fileCount: result.pagination.total,
+                totalSize: totalSize,
+                public: bucket.public,
+                createdAt: bucket.createdAt,
+              },
+            };
+          } catch (error) {
+            if (error) {
+              console.error(error);
+              return null;
+            }
+            return {
+              bucketName: bucket.name,
+              stats: {
+                fileCount: 0,
+                totalSize: 0,
+                public: bucket.public,
+                createdAt: bucket.createdAt,
+              },
+            };
+          }
+        });
+        const results = await Promise.all(promises);
+        results.forEach((result) => {
+          if (result) {
+            stats[result.bucketName] = result.stats;
+          }
+        });
+        return stats;
+      },
+      enabled: enabled && (buckets?.length || 0) > 0,
+      staleTime: 30000,
+    });
+  };
+
+  // Mutation to upload an object
+  const uploadObjectMutation = useMutation({
+    mutationFn: async ({
+      bucket,
+      objectKey,
+      file,
+    }: {
+      bucket: string;
+      objectKey: string;
+      file: File;
+    }) => storageService.uploadObject(bucket, objectKey, file),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['storage'] });
+    },
+  });
+
+  // Mutation to delete an object
+  const deleteObjectsMutation = useMutation({
+    mutationFn: ({ bucket, keys }: { bucket: string; keys: string[] }) =>
+      storageService.deleteObjects(bucket, keys),
+    onSuccess: (result) => {
+      const { success, failures } = result;
+      const successCount = success.length;
+      const failureCount = failures.length;
+      if (failureCount > 0 && successCount > 0) {
+        showToast(
+          `${successCount} ${successCount > 1 ? 'files' : 'file'} deleted, ${failureCount} ${failureCount > 1 ? 'files' : 'file'} failed to delete.`,
+          'warn'
+        );
+      } else if (failureCount > 0) {
+        showToast(
+          `Failed to delete ${failureCount} ${failureCount > 1 ? 'files' : 'file'}`,
+          'error'
+        );
+      } else if (successCount > 0) {
+        showToast(
+          `${successCount} ${successCount > 1 ? 'files' : 'file'} deleted successfully.`,
+          'success'
+        );
+      }
+
+      void queryClient.invalidateQueries({ queryKey: ['storage'] });
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to delete file';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Mutation to create a bucket
+  const createBucketMutation = useMutation({
+    mutationFn: ({ bucketName, isPublic }: { bucketName: string; isPublic: boolean }) =>
+      storageService.createBucket(bucketName, isPublic),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['storage', 'buckets'] });
+      showToast('Bucket created successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to create bucket';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Mutation to delete a bucket
+  const deleteBucketMutation = useMutation({
+    mutationFn: (bucketName: string) => storageService.deleteBucket(bucketName),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['storage', 'buckets'] });
+      showToast('Bucket deleted successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to delete bucket';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Mutation to edit a bucket
+  const editBucketMutation = useMutation({
+    mutationFn: ({ bucketName, config }: { bucketName: string; config: { isPublic: boolean } }) =>
+      storageService.editBucket(bucketName, config),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['storage'] });
+      showToast('Bucket updated successfully', 'success');
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to update bucket';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  return {
+    // Data
+    buckets: buckets || [],
+    bucketsCount: buckets?.length || 0,
+
+    // Loading states
+    isLoadingBuckets,
+    isUploadingObject: uploadObjectMutation.isPending,
+    isDeletingObject: deleteObjectsMutation.isPending,
+    isCreatingBucket: createBucketMutation.isPending,
+    isDeletingBucket: deleteBucketMutation.isPending,
+    isEditingBucket: editBucketMutation.isPending,
+
+    // Errors
+    bucketsError,
+
+    // Actions
+    uploadObject: uploadObjectMutation.mutateAsync,
+    deleteObjects: deleteObjectsMutation.mutate,
+    createBucket: createBucketMutation.mutateAsync,
+    deleteBucket: deleteBucketMutation.mutateAsync,
+    editBucket: editBucketMutation.mutateAsync,
+    refetchBuckets,
+
+    // Helpers
+    useListObjects,
+    useBucketStats,
+    getDownloadUrl: storageService.getDownloadUrl,
+    downloadObject: storageService.downloadObject,
+  };
+}

package/frontend/src/features/storage/page/StoragePage.tsx

@@ -1,26 +1,30 @@
 import React, { useState, useEffect, useRef, useCallback, type DragEvent } from 'react';
-import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { Upload } from 'lucide-react';
 import PencilIcon from '@/assets/icons/pencil.svg?react';
 import RefreshIcon from '@/assets/icons/refresh.svg?react';
-import { storageService } from '@/features/storage/services/storage.service';
-import { Button } from '@/components/radix/Button';
-import { Alert, AlertDescription } from '@/components/radix/Alert';
+import { useStorage } from '@/features/storage/hooks/useStorage';
 import { StorageSidebar } from '@/features/storage/components/StorageSidebar';
 import { StorageManager } from '@/features/storage/components/StorageManager';
 import { BucketFormDialog } from '@/features/storage/components/BucketFormDialog';
-import { ConfirmDialog } from '@/components/ConfirmDialog';
-import { EmptyState } from '@/components/EmptyState';
+
+import { useConfirm } from '@/lib/hooks/useConfirm';
+import { useToast } from '@/lib/hooks/useToast';
+import { useUploadToast } from '@/features/storage/components/UploadToast';
 import {
+  SearchInput,
+  SelectionClearButton,
+  DeleteActionButton,
+  Alert,
+  AlertDescription,
+  Button,
+  ConfirmDialog,
+  EmptyState,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/radix/Tooltip';
-import { useConfirm } from '@/lib/hooks/useConfirm';
-import { useToast } from '@/lib/hooks/useToast';
-import { useUploadToast } from '@/features/storage/components/UploadToast';
-import { SearchInput, SelectionClearButton, DeleteActionButton } from '@/components';
+} from '@/components';
 import {
   DataUpdatePayload,
   DataUpdateResourceType,
@@ -58,103 +62,31 @@ export default function StoragePage() {
 
   const { socket, isConnected } = useSocket();
 
-  // Fetch buckets
   const {
-    data: buckets = [],
-    isLoading,
-    error: bucketsError,
-    refetch: refetchBuckets,
-  } = useQuery({
-    queryKey: ['storage', 'buckets'],
-    queryFn: () => storageService.listBuckets(),
-  });
-
-  // Fetch bucket statistics
-  const { data: bucketStats } = useQuery({
-    queryKey: ['storage', 'bucket-stats', buckets],
-    queryFn: async () => {
-      const stats: Record<
-        string,
-        { fileCount: number; totalSize: number; public: boolean; createdAt?: string }
-      > = {};
-      const currentBuckets = buckets;
-      const promises = currentBuckets.map(async (bucket) => {
-        try {
-          const result = await storageService.listObjects(bucket.name, { limit: 1000 });
-          const objects = result.objects;
-          const totalSize = objects.reduce((sum, file) => sum + file.size, 0);
-          return {
-            bucketName: bucket.name,
-            stats: {
-              fileCount: result.pagination.total,
-              totalSize: totalSize,
-              public: bucket.public,
-              createdAt: bucket.createdAt,
-            },
-          };
-        } catch (error) {
-          if (error) {
-            console.error(error);
-            return null;
-          }
-          return {
-            bucketName: bucket.name,
-            stats: {
-              fileCount: 0,
-              totalSize: 0,
-              public: bucket.public,
-              createdAt: bucket.createdAt,
-            },
-          };
-        }
-      });
-      const results = await Promise.all(promises);
-      results.forEach((result) => {
-        if (result) {
-          stats[result.bucketName] = result.stats;
-        }
-      });
-      return stats;
-    },
-    enabled: buckets.length > 0,
-    staleTime: 30000, // Cache for 30 seconds
-  });
+    buckets,
+    isLoadingBuckets: isLoading,
+    bucketsError,
+    refetchBuckets,
+    useBucketStats,
+    uploadObject,
+    deleteObjects,
+    deleteBucket,
+  } = useStorage();
+
+  const { data: bucketStats } = useBucketStats();
 
   // Build bucket info map
   const bucketInfo = React.useMemo(() => {
     return bucketStats || {};
   }, [bucketStats]);
 
-  // Upload mutation
-  const uploadMutation = useMutation({
-    mutationFn: async ({
-      bucket,
-      file,
-      fileName,
-    }: {
-      bucket: string;
-      file: File;
-      fileName?: string;
-    }) => {
-      const key = fileName || file.name;
-      return await storageService.uploadObject(bucket, key, file);
-    },
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ['storage'] });
-    },
-    // Remove global onError handler - errors are now handled individually in uploadFiles
-  });
-
   useEffect(() => {
     if (!socket || !isConnected) {
       return;
     }
 
     const handleDataUpdate = (message: SocketMessage<DataUpdatePayload>) => {
-      if (
-        message.payload?.resource === DataUpdateResourceType.METADATA ||
-        message.payload?.resource === DataUpdateResourceType.STORAGE_SCHEMA
-      ) {
+      if (message.payload?.resource === DataUpdateResourceType.BUCKETS) {
         // Invalidate all buckets queries
         void queryClient.invalidateQueries({ queryKey: ['storage'] });
       }
@@ -169,11 +101,16 @@ export default function StoragePage() {
 
   // Auto-select first bucket
   useEffect(() => {
-    if (buckets.length > 0 && !selectedBucket) {
+    if (buckets.length && !selectedBucket) {
       setSelectedBucket(buckets[0].name);
     }
   }, [buckets, selectedBucket]);
 
+  // Clear selected files when switching buckets
+  useEffect(() => {
+    setSelectedFiles(new Set());
+  }, [selectedBucket]);
+
   const handleRefresh = async () => {
     setIsRefreshing(true);
     try {
@@ -188,7 +125,7 @@ export default function StoragePage() {
 
   // Handle bulk delete files
   const handleBulkDeleteFiles = async (fileKeys: string[]) => {
-    if (!selectedBucket || fileKeys.length === 0) {
+    if (!selectedBucket || !fileKeys.length) {
       return;
     }
 
@@ -200,20 +137,13 @@ export default function StoragePage() {
     });
 
     if (shouldDelete) {
-      try {
-        await Promise.all(fileKeys.map((key) => storageService.deleteObject(selectedBucket, key)));
-        void queryClient.invalidateQueries({ queryKey: ['storage'] });
-        setSelectedFiles(new Set());
-        showToast(`${fileKeys.length} files deleted successfully`, 'success');
-      } catch {
-        showToast('Failed to delete some files', 'error');
-      }
+      deleteObjects({ bucket: selectedBucket, keys: fileKeys });
+      setSelectedFiles(new Set());
     }
-    void queryClient.invalidateQueries({ queryKey: ['storage'] });
   };
 
   const uploadFiles = async (files: FileList | File[] | null) => {
-    if (!files || files.length === 0 || !selectedBucket) {
+    if (!files || !files.length || !selectedBucket) {
       return;
     }
 
@@ -246,10 +176,10 @@ export default function StoragePage() {
       updateUploadProgress(toastId, progress);
 
       try {
-        await uploadMutation.mutateAsync({
+        await uploadObject({
           bucket: selectedBucket,
+          objectKey: files[i].name,
           file: files[i],
-          fileName: files[i].name, // Backend will auto-rename if needed
         });
         successCount++;
       } catch (error) {
@@ -282,7 +212,7 @@ export default function StoragePage() {
     showToast,
     showUploadToast,
     updateUploadProgress,
-    uploadMutation,
+    uploadObject,
   ]);
 
   const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -301,12 +231,8 @@ export default function StoragePage() {
 
     if (shouldDelete) {
       try {
-        await storageService.deleteBucket(bucketName);
-
-        // Refresh buckets list
+        await deleteBucket(bucketName);
         await refetchBuckets();
-        showToast('Bucket deleted successfully', 'success');
-
         // If the deleted bucket was selected, select the first available bucket
         if (selectedBucket === bucketName) {
           const updatedBuckets =

package/frontend/src/features/storage/services/storage.service.ts

@@ -94,7 +94,7 @@ export const storageService = {
 
   // Download an object (returns blob)
   async downloadObject(bucketName: string, objectKey: string): Promise<Blob> {
-    const response = await fetch(this.getDownloadUrl(bucketName, objectKey), {
+    const response = await fetch(storageService.getDownloadUrl(bucketName, objectKey), {
       headers: {
         Authorization: `Bearer ${apiClient.getToken()}`,
       },
@@ -116,6 +116,27 @@ export const storageService = {
     );
   },
 
+  async deleteObjects(
+    bucketName: string,
+    objectKeys: string[]
+  ): Promise<{ success: string[]; failures: { key: string; error: Error }[] }> {
+    const results = await Promise.allSettled(
+      objectKeys.map((key) => this.deleteObject(bucketName, key))
+    );
+    const success: string[] = [];
+    const failures: { key: string; error: Error }[] = [];
+
+    results.forEach((result, index) => {
+      if (result.status === 'fulfilled') {
+        success.push(objectKeys[index]);
+      } else {
+        failures.push({ key: objectKeys[index], error: result.reason as Error });
+      }
+    });
+
+    return { success, failures };
+  },
+
   // Create a new bucket
   async createBucket(bucketName: string, isPublic: boolean = true): Promise<void> {
     await apiClient.request('/storage/buckets', {