Merge pull request #490 from langflow-ai/delete-confirmation-list

Delete confirmation list: limit the number deleted files listed

frontend/app/knowledge/page.tsx

@@ -31,7 +31,10 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { StatusBadge } from "@/components/ui/status-badge";
-import { DeleteConfirmationDialog } from "../../components/delete-confirmation-dialog";
+import {
+  DeleteConfirmationDialog,
+  formatFilesToDelete,
+} from "../../components/delete-confirmation-dialog";
 import GoogleDriveIcon from "../../components/icons/google-drive-logo";
 import OneDriveIcon from "../../components/icons/one-drive-logo";
 import SharePointIcon from "../../components/icons/share-point-logo";
@@ -399,7 +402,7 @@ function SearchPage() {
         }? This will remove all chunks and data associated with these documents. This action cannot be undone.
 
 Documents to be deleted:
-${selectedRows.map((row) => `• ${row.filename}`).join("\n")}`}
+${formatFilesToDelete(selectedRows)}`}
         confirmText={selectedRows.length > 1 ? "Delete All" : "Delete"}
         onConfirm={handleBulkDelete}
         isLoading={deleteDocumentMutation.isPending}

frontend/components/delete-confirmation-dialog.tsx

@@ -12,6 +12,26 @@ import {
 import { Button } from "./ui/button";
 import { AlertTriangle } from "lucide-react";
 
+/**
+ * Formats a list of files to be deleted, truncating if necessary.
+ * @param files - Array of files with a `filename` property
+ * @param maxVisible - Maximum number of items to show before truncating (default: 5)
+ * @returns Formatted string with bullet points, truncated if needed
+ */
+export function formatFilesToDelete(
+  files: Array<{ filename: string }>,
+  maxVisible = 5,
+): string {
+  const visibleFiles = files.slice(0, maxVisible);
+  const remainingCount = files.length - maxVisible;
+  const fileList = visibleFiles.map((file) => `• ${file.filename}`).join("\n");
+  return remainingCount > 0
+    ? `${fileList}\n• ... and ${remainingCount} more document${
+        remainingCount > 1 ? "s" : ""
+      }`
+    : fileList;
+}
+
 interface DeleteConfirmationDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;