Improvement/task delete confirmation 854

webview-ui/src/components/history/DeleteTaskDialog.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui"
+import { vscode } from "@/utils/vscode"
+
+interface DeleteTaskDialogProps {
+	taskId: string
+	open: boolean
+	onOpenChange: (open: boolean) => void
+}
+
+export const DeleteTaskDialog = ({ taskId, open, onOpenChange }: DeleteTaskDialogProps) => {
+	const handleDelete = () => {
+		vscode.postMessage({ type: "deleteTaskWithId", text: taskId })
+		onOpenChange(false)
+	}
+
+	return (
+		<AlertDialog open={open} onOpenChange={onOpenChange}>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Delete Task</AlertDialogTitle>
+					<AlertDialogDescription>
+						Are you sure you want to delete this task? This action cannot be undone.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel asChild>
+						<Button variant="secondary">Cancel</Button>
+					</AlertDialogCancel>
+					<AlertDialogAction asChild>
+						<Button variant="destructive" onClick={handleDelete}>
+							Delete
+						</Button>
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	)
+}

webview-ui/src/components/history/HistoryView.tsx

@@ -1,4 +1,5 @@
 import React, { memo, useMemo, useState, useEffect } from "react"
+import { DeleteTaskDialog } from "./DeleteTaskDialog"
 import { Fzf } from "fzf"
 import prettyBytes from "pretty-bytes"
 import { Virtuoso } from "react-virtuoso"
@@ -37,8 +38,12 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 		vscode.postMessage({ type: "showTaskWithId", text: id })
 	}
 
+	const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+	const [taskToDelete, setTaskToDelete] = useState<string | null>(null)
+
 	const handleDeleteHistoryItem = (id: string) => {
-		vscode.postMessage({ type: "deleteTaskWithId", text: id })
+		setTaskToDelete(id)
+		setDeleteDialogOpen(true)
 	}
 
 	const formatDate = (timestamp: number) => {
@@ -398,6 +403,18 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 					)}
 				/>
 			</div>
+			{taskToDelete && (
+				<DeleteTaskDialog
+					taskId={taskToDelete}
+					open={deleteDialogOpen}
+					onOpenChange={(open) => {
+						setDeleteDialogOpen(open)
+						if (!open) {
+							setTaskToDelete(null)
+						}
+					}}
+				/>
+			)}
 		</div>
 	)
 }

webview-ui/src/components/history/__tests__/HistoryView.test.tsx

@@ -135,17 +135,22 @@ describe("HistoryView", () => {
 		})
 	})
 
-	it("handles task deletion", () => {
+	it("handles task deletion", async () => {
 		const onDone = jest.fn()
 		render(<HistoryView onDone={onDone} />)
 
 		// Find and hover over first task
 		const taskContainer = screen.getByTestId("virtuoso-item-1")
 		fireEvent.mouseEnter(taskContainer)
 
+		// Click delete button to open confirmation dialog
 		const deleteButton = within(taskContainer).getByTitle("Delete Task")
 		fireEvent.click(deleteButton)
 
+		// Find and click the confirm delete button in the dialog
+		const confirmDeleteButton = screen.getByRole("button", { name: /delete/i })
+		fireEvent.click(confirmDeleteButton)
+
 		// Verify vscode message was sent
 		expect(vscode.postMessage).toHaveBeenCalledWith({
 			type: "deleteTaskWithId",