diff --git a/webview-ui/src/components/history/DeleteTaskDialog.tsx b/webview-ui/src/components/history/DeleteTaskDialog.tsx
new file mode 100644
index 00000000000..b40adeae3de
--- /dev/null
+++ b/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 (
+
+
+
+ Delete Task
+
+ Are you sure you want to delete this task? This action cannot be undone.
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/webview-ui/src/components/history/HistoryView.tsx b/webview-ui/src/components/history/HistoryView.tsx
index 38ca14df46c..ca60e1fcb89 100644
--- a/webview-ui/src/components/history/HistoryView.tsx
+++ b/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(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) => {
)}
/>
+ {taskToDelete && (
+ {
+ setDeleteDialogOpen(open)
+ if (!open) {
+ setTaskToDelete(null)
+ }
+ }}
+ />
+ )}
)
}
diff --git a/webview-ui/src/components/history/__tests__/HistoryView.test.tsx b/webview-ui/src/components/history/__tests__/HistoryView.test.tsx
index 7408b268786..12b0181af6b 100644
--- a/webview-ui/src/components/history/__tests__/HistoryView.test.tsx
+++ b/webview-ui/src/components/history/__tests__/HistoryView.test.tsx
@@ -135,7 +135,7 @@ describe("HistoryView", () => {
})
})
- it("handles task deletion", () => {
+ it("handles task deletion", async () => {
const onDone = jest.fn()
render()
@@ -143,9 +143,14 @@ describe("HistoryView", () => {
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",