Skip to content

Commit 992db80

Browse files
aShankiaShanki
committed
Add confirmation prompt before deleting a task
Fixes #854 Add a confirmation prompt before deleting tasks in the task/prompt history view. * **HistoryView.tsx** - Add state `confirmDeleteId` to manage the confirmation prompt. - Update `handleDeleteHistoryItem` to set `confirmDeleteId` instead of deleting immediately. - Add `confirmDelete` and `cancelDelete` functions to handle confirmation and cancellation. - Add confirmation modal with "Yes" and "No" buttons. * **HistoryView.test.tsx** - Update task deletion test to include confirmation prompt. - Verify confirmation prompt appears and deletion is confirmed. * **HistoryPreview.tsx** - Add state `confirmDeleteId` to manage the confirmation prompt. - Update `handleHistorySelect` to set `confirmDeleteId` instead of selecting immediately. - Add `confirmDelete` and `cancelDelete` functions to handle confirmation and cancellation. - Add confirmation modal with "Yes" and "No" buttons. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/RooVetGit/Roo-Code/issues/854?shareId=XXXX-XXXX-XXXX-XXXX).
1 parent 14d7691 commit 992db80

File tree

3 files changed

+86
-5
lines changed

3 files changed

+86
-5
lines changed

‎webview-ui/src/components/history/HistoryPreview.tsx‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
22
import { useExtensionState } from "../../context/ExtensionStateContext"
33
import { vscode } from "../../utils/vscode"
4-
import { memo } from "react"
4+
import { memo, useState } from "react"
55
import { formatLargeNumber } from "../../utils/format"
66

77
type HistoryPreviewProps = {
@@ -10,8 +10,19 @@ type HistoryPreviewProps = {
1010

1111
const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
1212
const { taskHistory } = useExtensionState()
13+
const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)
14+
1315
const handleHistorySelect = (id: string) => {
14-
vscode.postMessage({ type: "showTaskWithId", text: id })
16+
setConfirmDeleteId(id)
17+
}
18+
19+
const confirmDelete = (id: string) => {
20+
vscode.postMessage({ type: "deleteTaskWithId", text: id })
21+
setConfirmDeleteId(null)
22+
}
23+
24+
const cancelDelete = () => {
25+
setConfirmDeleteId(null)
1526
}
1627

1728
const formatDate = (timestamp: number) => {
@@ -47,9 +58,37 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
4758
opacity: 1;
4859
pointer-events: auto;
4960
}
61+
.confirm-delete-modal {
62+
position: fixed;
63+
top: 50%;
64+
left: 50%;
65+
transform: translate(-50%, -50%);
66+
background-color: var(--vscode-notifications-background);
67+
color: var(--vscode-notifications-foreground);
68+
padding: 20px;
69+
border-radius: 4px;
70+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
71+
z-index: 1000;
72+
display: flex;
73+
flex-direction: column;
74+
align-items: center;
75+
}
76+
.confirm-delete-modal button {
77+
margin-top: 10px;
78+
}
5079
`}
5180
</style>
5281

82+
{confirmDeleteId && (
83+
<div className="confirm-delete-modal">
84+
<p>Are you sure you want to delete this task?</p>
85+
<div>
86+
<VSCodeButton onClick={() => confirmDelete(confirmDeleteId)}>Yes</VSCodeButton>
87+
<VSCodeButton onClick={cancelDelete}>No</VSCodeButton>
88+
</div>
89+
</div>
90+
)}
91+
5392
<div
5493
style={{
5594
color: "var(--vscode-descriptionForeground)",

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
1919
const [sortOption, setSortOption] = useState<SortOption>("newest")
2020
const [lastNonRelevantSort, setLastNonRelevantSort] = useState<SortOption | null>("newest")
2121
const [showCopyModal, setShowCopyModal] = useState(false)
22+
const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)
2223

2324
useEffect(() => {
2425
if (searchQuery && sortOption !== "mostRelevant" && !lastNonRelevantSort) {
@@ -35,7 +36,16 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
3536
}
3637

3738
const handleDeleteHistoryItem = (id: string) => {
39+
setConfirmDeleteId(id)
40+
}
41+
42+
const confirmDelete = (id: string) => {
3843
vscode.postMessage({ type: "deleteTaskWithId", text: id })
44+
setConfirmDeleteId(null)
45+
}
46+
47+
const cancelDelete = () => {
48+
setConfirmDeleteId(null)
3949
}
4050

4151
const handleCopyTask = async (e: React.MouseEvent, task: string) => {
@@ -142,9 +152,36 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
142152
z-index: 1000;
143153
transition: opacity 0.2s ease-in-out;
144154
}
155+
.confirm-delete-modal {
156+
position: fixed;
157+
top: 50%;
158+
left: 50%;
159+
transform: translate(-50%, -50%);
160+
background-color: var(--vscode-notifications-background);
161+
color: var(--vscode-notifications-foreground);
162+
padding: 20px;
163+
border-radius: 4px;
164+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
165+
z-index: 1000;
166+
display: flex;
167+
flex-direction: column;
168+
align-items: center;
169+
}
170+
.confirm-delete-modal button {
171+
margin-top: 10px;
172+
}
145173
`}
146174
</style>
147175
{showCopyModal && <div className="copy-modal">Prompt Copied to Clipboard</div>}
176+
{confirmDeleteId && (
177+
<div className="confirm-delete-modal">
178+
<p>Are you sure you want to delete this task?</p>
179+
<div>
180+
<VSCodeButton onClick={() => confirmDelete(confirmDeleteId)}>Yes</VSCodeButton>
181+
<VSCodeButton onClick={cancelDelete}>No</VSCodeButton>
182+
</div>
183+
</div>
184+
)}
148185
<div
149186
style={{
150187
position: "fixed",

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// cd webview-ui && npx jest src/components/history/__tests__/HistoryView.test.ts
2-
31
import { render, screen, fireEvent, within, act } from "@testing-library/react"
42
import HistoryView from "../HistoryView"
53
import { useExtensionState } from "../../../context/ExtensionStateContext"
@@ -135,7 +133,7 @@ describe("HistoryView", () => {
135133
})
136134
})
137135

138-
it("handles task deletion", () => {
136+
it("handles task deletion with confirmation prompt", () => {
139137
const onDone = jest.fn()
140138
render(<HistoryView onDone={onDone} />)
141139

@@ -146,6 +144,13 @@ describe("HistoryView", () => {
146144
const deleteButton = within(taskContainer).getByTitle("Delete Task")
147145
fireEvent.click(deleteButton)
148146

147+
// Verify confirmation prompt appears
148+
expect(screen.getByText("Are you sure you want to delete this task?")).toBeInTheDocument()
149+
150+
// Confirm deletion
151+
const confirmButton = screen.getByText("Yes")
152+
fireEvent.click(confirmButton)
153+
149154
// Verify vscode message was sent
150155
expect(vscode.postMessage).toHaveBeenCalledWith({
151156
type: "deleteTaskWithId",

0 commit comments

Comments
 (0)