updates

internal/site/src/components/network-probes-table/network-probes-table.tsx

@@ -2,25 +2,43 @@ import { t } from "@lingui/core/macro"
 import { Trans } from "@lingui/react/macro"
 import {
 	type ColumnFiltersState,
+	type ColumnDef,
 	flexRender,
 	getCoreRowModel,
 	getFilteredRowModel,
 	getSortedRowModel,
 	type Row,
+	type RowSelectionState,
 	type SortingState,
 	type Table as TableType,
 	useReactTable,
 	type VisibilityState,
 } from "@tanstack/react-table"
 import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+import { Button, buttonVariants } from "@/components/ui/button"
 import { memo, useMemo, useRef, useState } from "react"
 import { getProbeColumns } from "@/components/network-probes-table/network-probes-columns"
 import { Card, CardHeader, CardTitle } from "@/components/ui/card"
+import { Checkbox } from "@/components/ui/checkbox"
 import { Input } from "@/components/ui/input"
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { useToast } from "@/components/ui/use-toast"
 import { isReadOnlyUser } from "@/lib/api"
+import { pb } from "@/lib/api"
 import { $allSystemsById } from "@/lib/stores"
 import { cn, getVisualStringWidth, useBrowserStorage } from "@/lib/utils"
+import { Trash2Icon } from "lucide-react"
 import type { NetworkProbeRecord } from "@/types"
 import { AddProbeDialog } from "./probe-dialog"
 
@@ -38,7 +56,11 @@ export default function NetworkProbesTableNew({
 	)
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+	const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
 	const [globalFilter, setGlobalFilter] = useState("")
+	const [deleteOpen, setDeleteOpen] = useState(false)
+	const { toast } = useToast()
+	const canManageProbes = !isReadOnlyUser()
 
 	const { longestName, longestTarget } = useMemo(() => {
 		let longestName = 0
@@ -54,19 +76,79 @@ export default function NetworkProbesTableNew({
 	const columns = useMemo(() => {
 		let columns = getProbeColumns(longestName, longestTarget)
 		columns = systemId ? columns.filter((col) => col.id !== "system") : columns
-		columns = isReadOnlyUser() ? columns.filter((col) => col.id !== "actions") : columns
-		return columns
-	}, [systemId, longestName, longestTarget])
+		columns = canManageProbes ? columns : columns.filter((col) => col.id !== "actions")
+		if (!canManageProbes) {
+			return columns
+		}
+
+		const selectionColumn: ColumnDef<NetworkProbeRecord> = {
+			id: "select",
+			header: ({ table }) => (
+				<Checkbox
+					className="ms-2"
+					checked={table.getIsAllRowsSelected() || (table.getIsSomeRowsSelected() && "indeterminate")}
+					onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+					aria-label={t`Select all`}
+				/>
+			),
+			cell: ({ row }) => (
+				<Checkbox
+					checked={row.getIsSelected()}
+					onCheckedChange={(value) => row.toggleSelected(!!value)}
+					aria-label={t`Select row`}
+				/>
+			),
+			enableSorting: false,
+			enableHiding: false,
+			size: 44,
+		}
+
+		return [selectionColumn, ...columns]
+	}, [systemId, longestName, longestTarget, canManageProbes])
+
+	const handleBulkDelete = async () => {
+		setDeleteOpen(false)
+		const selectedIds = Object.keys(rowSelection)
+		if (!selectedIds.length) {
+			return
+		}
+
+		try {
+			let batch = pb.createBatch()
+			let inBatch = 0
+			for (const id of selectedIds) {
+				batch.collection("network_probes").delete(id)
+				inBatch++
+				if (inBatch >= 20) {
+					await batch.send()
+					batch = pb.createBatch()
+					inBatch = 0
+				}
+			}
+			if (inBatch) {
+				await batch.send()
+			}
+			table.resetRowSelection()
+		} catch (err: unknown) {
+			toast({
+				variant: "destructive",
+				title: t`Error`,
+				description: (err as Error)?.message || t`Failed to delete probes.`,
+			})
+		}
+	}
 
 	const table = useReactTable({
 		data: probes,
 		columns,
+		getRowId: (row) => row.id,
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: getSortedRowModel(),
 		getFilteredRowModel: getFilteredRowModel(),
 		onSortingChange: setSorting,
 		onColumnFiltersChange: setColumnFilters,
 		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: setRowSelection,
 		defaultColumn: {
 			sortUndefined: "last",
 			size: 900,
@@ -76,6 +158,7 @@ export default function NetworkProbesTableNew({
 			sorting,
 			columnFilters,
 			columnVisibility,
+			rowSelection,
 			globalFilter,
 		},
 		onGlobalFilterChange: setGlobalFilter,
@@ -106,20 +189,55 @@ export default function NetworkProbesTableNew({
 						</div>
 					</div>
 					<div className="md:ms-auto flex items-center gap-2">
+						{canManageProbes && table.getFilteredSelectedRowModel().rows.length > 0 && (
+							<div className="fixed bottom-0 left-0 w-full p-4 grid grid-cols-1 items-center gap-4 z-50 backdrop-blur-md shrink-0 md:static md:p-0 md:w-auto md:gap-3">
+								<AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+									<AlertDialogTrigger asChild>
+										<Button variant="destructive" className="h-9 shrink-0">
+											<Trash2Icon className="size-4 shrink-0" />
+											<span className="ms-1">
+												<Trans>Delete</Trans>
+											</span>
+										</Button>
+									</AlertDialogTrigger>
+									<AlertDialogContent>
+										<AlertDialogHeader>
+											<AlertDialogTitle>
+												<Trans>Are you sure?</Trans>
+											</AlertDialogTitle>
+											<AlertDialogDescription>
+												<Trans>This will permanently delete all selected records from the database.</Trans>
+											</AlertDialogDescription>
+										</AlertDialogHeader>
+										<AlertDialogFooter>
+											<AlertDialogCancel>
+												<Trans>Cancel</Trans>
+											</AlertDialogCancel>
+											<AlertDialogAction
+												className={cn(buttonVariants({ variant: "destructive" }))}
+												onClick={handleBulkDelete}
+											>
+												<Trans>Continue</Trans>
+											</AlertDialogAction>
+										</AlertDialogFooter>
+									</AlertDialogContent>
+								</AlertDialog>
+							</div>
+						)}
 						{probes.length > 0 && (
 							<Input
 								placeholder={t`Filter...`}
 								value={globalFilter}
 								onChange={(e) => setGlobalFilter(e.target.value)}
-								className="ms-auto px-4 w-full max-w-full md:w-64"
+								className="ms-auto px-4 w-full max-w-full md:w-50"
 							/>
 						)}
-						{!isReadOnlyUser() ? <AddProbeDialog systemId={systemId} /> : null}
+						{canManageProbes ? <AddProbeDialog systemId={systemId} /> : null}
 					</div>
 				</div>
 			</CardHeader>
 			<div className="rounded-md">
-				<NetworkProbesTable table={table} rows={rows} colLength={visibleColumns.length} />
+				<NetworkProbesTable table={table} rows={rows} colLength={visibleColumns.length} rowSelection={rowSelection} />
 			</div>
 		</Card>
 	)
@@ -129,10 +247,12 @@ const NetworkProbesTable = memo(function NetworkProbeTable({
 	table,
 	rows,
 	colLength,
+	rowSelection: _rowSelection,
 }: {
 	table: TableType<NetworkProbeRecord>
 	rows: Row<NetworkProbeRecord>[]
 	colLength: number
+	rowSelection: RowSelectionState
 }) {
 	// The virtualizer will need a reference to the scrollable container element
 	const scrollRef = useRef<HTMLDivElement>(null)
@@ -165,7 +285,14 @@ const NetworkProbesTable = memo(function NetworkProbeTable({
 						{rows.length ? (
 							virtualRows.map((virtualRow) => {
 								const row = rows[virtualRow.index]
-								return <NetworkProbeTableRow key={row.id} row={row} virtualRow={virtualRow} />
+								return (
+									<NetworkProbeTableRow
+										key={row.id}
+										row={row}
+										virtualRow={virtualRow}
+										isSelected={row.getIsSelected()}
+									/>
+								)
 							})
 						) : (
 							<TableRow>
@@ -202,12 +329,14 @@ function NetworkProbeTableHead({ table }: { table: TableType<NetworkProbeRecord>
 const NetworkProbeTableRow = memo(function NetworkProbeTableRow({
 	row,
 	virtualRow,
+	isSelected,
 }: {
 	row: Row<NetworkProbeRecord>
 	virtualRow: VirtualItem
+	isSelected: boolean
 }) {
 	return (
-		<TableRow data-state={row.getIsSelected() && "selected"} className="transition-opacity">
+		<TableRow data-state={isSelected && "selected"} className="transition-opacity">
 			{row.getVisibleCells().map((cell) => (
 				<TableCell
 					key={cell.id}