Skip to content

Treat HistoryView item clicks as (de)select in selection mode #3068

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrubens merged 2 commits into from
Apr 30, 2025
Merged

Treat HistoryView item clicks as (de)select in selection mode #3068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d68bbd
Treat HistoryView item clicks as (de)select in selection mode
jr Apr 30, 2025
0c21c40
UI tweaks
mrubens Apr 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions webview-ui/src/components/history/HistoryView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
<Button
variant={isSelectionMode ? "default" : "secondary"}
onClick={toggleSelectionMode}
data-testid="toggle-selection-mode-button"
title={
isSelectionMode
? `${t("history:exitSelectionMode")}`
Expand Down Expand Up @@ -170,7 +171,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {

{/* Select all control in selection mode */}
{isSelectionMode && tasks.length > 0 && (
<div className="flex items-center py-1 px-2 bg-vscode-editor-background rounded">
<div className="flex items-center py-1">
<div className="flex items-center gap-2">
<Checkbox
checked={tasks.length > 0 && selectedTaskIds.length === tasks.length}
Expand Down Expand Up @@ -217,12 +218,14 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
"bg-vscode-list-activeSelectionBackground":
isSelectionMode && selectedTaskIds.includes(item.id),
})}
onClick={(e) => {
if (!isSelectionMode || !(e.target as HTMLElement).closest(".task-checkbox")) {
onClick={() => {
if (isSelectionMode) {
toggleTaskSelection(item.id, !selectedTaskIds.includes(item.id))
} else {
vscode.postMessage({ type: "showTaskWithId", text: item.id })
}
}}>
<div className="flex items-start p-3 gap-2">
<div className="flex items-start p-3 gap-2 ml-2">
{/* Show checkbox in selection mode */}
{isSelectionMode && (
<div
Expand Down
17 changes: 17 additions & 0 deletions webview-ui/src/components/history/__tests__/HistoryView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,23 @@ describe("HistoryView", () => {
})
})

it("handles selection mode clicks", async () => {
const onDone = jest.fn()
render(<HistoryView onDone={onDone} />)

// Go to selection mode
fireEvent.click(screen.getByTestId("toggle-selection-mode-button"))

const taskContainer = screen.getByTestId("task-item-1")
Copy link
Copy Markdown
Contributor

@ellipsis-dev ellipsis-dev bot Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's an inconsistency with the test ID naming: in most tests, the task item is referenced with virtuoso-item-1, but in the handles selection mode clicks test, it uses task-item-1. Please verify and update the test ID for consistency.

Suggested change
const taskContainer = screen.getByTestId("task-item-1")
const taskContainer = screen.getByTestId("virtuoso-item-1")

This comment was generated because it violated a code review rule: mrule_oAUXVfj5l9XxF01R.

Copy link
Copy Markdown
Collaborator Author

@jr jr Apr 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

virtuoso-item- is actually added in a mock, and doesn't have a click handler. I could change this to scope everything by virtuoso-item-1 and then click something within it, but I'm not sure that would have added much.


// Click anywhere in the task item
fireEvent.click(taskContainer)

// Check the box instead of sending a message to open the task
expect(within(taskContainer).getByRole("checkbox")).toBeChecked()
expect(vscode.postMessage).not.toHaveBeenCalled()
})

describe("task deletion", () => {
it("shows confirmation dialog on regular click", () => {
const onDone = jest.fn()
Expand Down
4 changes: 2 additions & 2 deletions webview-ui/src/i18n/locales/en/history.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
"delete": "Delete",
"exitSelection": "Exit Selection",
"selectionMode": "Selection Mode",
"deselectAll": "Deselect All",
"selectAll": "Select All",
"deselectAll": "Deselect all",
"selectAll": "Select all",
"selectedItems": "Selected {{selected}}/{{total}} items",
"clearSelection": "Clear Selection",
"deleteSelected": "Delete Selected",
Expand Down