From ae58a24690ec2a4b522b142947a368c7bed89864 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sun, 29 Mar 2026 12:14:36 -0700
Subject: [PATCH 1/2] Enable Enter on destructive alert dialogs

---
 .../ProjectSection/CloseProjectDialog.tsx     |  7 +-
 .../FileViewerPane/UnsavedChangesDialog.tsx   |  7 +-
 .../RightSidebar/ChangesView/ChangesView.tsx  | 12 ++--
 .../DiscardConfirmDialog.tsx                  |  7 +-
 .../ui/src/components/ui/alert-dialog.tsx     | 31 ++++++--
 ...nabled-alert-dialog-primary-action.test.ts | 72 +++++++++++++++++++
 ...ter-enabled-alert-dialog-primary-action.ts | 52 ++++++++++++++
 7 files changed, 170 insertions(+), 18 deletions(-)
 create mode 100644 packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.test.ts
 create mode 100644 packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.ts

diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/CloseProjectDialog.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/CloseProjectDialog.tsx
index 4d5cd2303bf..6e1f11059ca 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/CloseProjectDialog.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/CloseProjectDialog.tsx
@@ -1,10 +1,10 @@
 import {
 	AlertDialog,
-	AlertDialogContent,
 	AlertDialogDescription,
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
+	EnterEnabledAlertDialogContent,
 } from "@superset/ui/alert-dialog";
 import { Button } from "@superset/ui/button";
 
@@ -30,7 +30,7 @@ export function CloseProjectDialog({
 
 	return (
 		<AlertDialog open={open} onOpenChange={onOpenChange}>
-			<AlertDialogContent className="max-w-[340px] gap-0 p-0">
+			<EnterEnabledAlertDialogContent className="max-w-[340px] gap-0 p-0">
 				<AlertDialogHeader className="px-4 pt-4 pb-2">
 					<AlertDialogTitle className="font-medium">
 						Close project "{projectName}"?
@@ -59,6 +59,7 @@ export function CloseProjectDialog({
 						Cancel
 					</Button>
 					<Button
+						data-alert-dialog-primary-action
 						variant="destructive"
 						size="sm"
 						className="h-7 px-3 text-xs"
@@ -67,7 +68,7 @@ export function CloseProjectDialog({
 						Close Project
 					</Button>
 				</AlertDialogFooter>
-			</AlertDialogContent>
+			</EnterEnabledAlertDialogContent>
 		</AlertDialog>
 	);
 }
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/UnsavedChangesDialog.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/UnsavedChangesDialog.tsx
index 0203efdd70f..2fc01c985b0 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/UnsavedChangesDialog.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/UnsavedChangesDialog.tsx
@@ -2,11 +2,11 @@ import {
 	AlertDialog,
 	AlertDialogAction,
 	AlertDialogCancel,
-	AlertDialogContent,
 	AlertDialogDescription,
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
+	EnterEnabledAlertDialogContent,
 } from "@superset/ui/alert-dialog";
 import { Button } from "@superset/ui/button";
 import { LuLoader } from "react-icons/lu";
@@ -48,7 +48,7 @@ export function UnsavedChangesDialog({
 
 	return (
 		<AlertDialog open={open} onOpenChange={isSaving ? undefined : onOpenChange}>
-			<AlertDialogContent>
+			<EnterEnabledAlertDialogContent>
 				<AlertDialogHeader>
 					<AlertDialogTitle>{title}</AlertDialogTitle>
 					<AlertDialogDescription>{description}</AlertDialogDescription>
@@ -56,6 +56,7 @@ export function UnsavedChangesDialog({
 				<AlertDialogFooter>
 					<AlertDialogCancel disabled={isSaving}>Cancel</AlertDialogCancel>
 					<Button
+						data-alert-dialog-primary-action
 						variant="outline"
 						onClick={handleDiscardAndSwitch}
 						disabled={isSaving}
@@ -74,7 +75,7 @@ export function UnsavedChangesDialog({
 						)}
 					</AlertDialogAction>
 				</AlertDialogFooter>
-			</AlertDialogContent>
+			</EnterEnabledAlertDialogContent>
 		</AlertDialog>
 	);
 }
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/ChangesView.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/ChangesView.tsx
index b6cd9d5b8e2..d24ad9d03e5 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/ChangesView.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/ChangesView.tsx
@@ -1,10 +1,10 @@
 import {
 	AlertDialog,
-	AlertDialogContent,
 	AlertDialogDescription,
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
+	EnterEnabledAlertDialogContent,
 } from "@superset/ui/alert-dialog";
 import { Button } from "@superset/ui/button";
 import { toast } from "@superset/ui/sonner";
@@ -838,7 +838,7 @@ export function ChangesView({
 				open={showDiscardUnstagedDialog}
 				onOpenChange={setShowDiscardUnstagedDialog}
 			>
-				<AlertDialogContent className="max-w-[340px] gap-0 p-0">
+				<EnterEnabledAlertDialogContent className="max-w-[340px] gap-0 p-0">
 					<AlertDialogHeader className="px-4 pt-4 pb-2">
 						<AlertDialogTitle className="font-medium">
 							Discard all unstaged changes?
@@ -858,6 +858,7 @@ export function ChangesView({
 							Cancel
 						</Button>
 						<Button
+							data-alert-dialog-primary-action
 							variant="destructive"
 							size="sm"
 							className="h-7 px-3 text-xs"
@@ -871,14 +872,14 @@ export function ChangesView({
 							Discard All
 						</Button>
 					</AlertDialogFooter>
-				</AlertDialogContent>
+				</EnterEnabledAlertDialogContent>
 			</AlertDialog>
 
 			<AlertDialog
 				open={showDiscardStagedDialog}
 				onOpenChange={setShowDiscardStagedDialog}
 			>
-				<AlertDialogContent className="max-w-[340px] gap-0 p-0">
+				<EnterEnabledAlertDialogContent className="max-w-[340px] gap-0 p-0">
 					<AlertDialogHeader className="px-4 pt-4 pb-2">
 						<AlertDialogTitle className="font-medium">
 							Discard all staged changes?
@@ -898,6 +899,7 @@ export function ChangesView({
 							Cancel
 						</Button>
 						<Button
+							data-alert-dialog-primary-action
 							variant="destructive"
 							size="sm"
 							className="h-7 px-3 text-xs"
@@ -911,7 +913,7 @@ export function ChangesView({
 							Discard All
 						</Button>
 					</AlertDialogFooter>
-				</AlertDialogContent>
+				</EnterEnabledAlertDialogContent>
 			</AlertDialog>
 		</div>
 	);
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/DiscardConfirmDialog/DiscardConfirmDialog.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/DiscardConfirmDialog/DiscardConfirmDialog.tsx
index db3841ad710..c17ef011792 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/DiscardConfirmDialog/DiscardConfirmDialog.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/DiscardConfirmDialog/DiscardConfirmDialog.tsx
@@ -1,10 +1,10 @@
 import {
 	AlertDialog,
-	AlertDialogContent,
 	AlertDialogDescription,
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogTitle,
+	EnterEnabledAlertDialogContent,
 } from "@superset/ui/alert-dialog";
 import { Button } from "@superset/ui/button";
 
@@ -29,7 +29,7 @@ export function DiscardConfirmDialog({
 }: DiscardConfirmDialogProps) {
 	return (
 		<AlertDialog open={open} onOpenChange={onOpenChange}>
-			<AlertDialogContent className="max-w-[340px] gap-0 p-0">
+			<EnterEnabledAlertDialogContent className="max-w-[340px] gap-0 p-0">
 				<AlertDialogHeader className="px-4 pt-4 pb-2">
 					<AlertDialogTitle className="font-medium">{title}</AlertDialogTitle>
 					<AlertDialogDescription>{description}</AlertDialogDescription>
@@ -44,6 +44,7 @@ export function DiscardConfirmDialog({
 						Cancel
 					</Button>
 					<Button
+						data-alert-dialog-primary-action
 						variant="destructive"
 						size="sm"
 						className="h-7 px-3 text-xs"
@@ -56,7 +57,7 @@ export function DiscardConfirmDialog({
 						{confirmLabel}
 					</Button>
 				</AlertDialogFooter>
-			</AlertDialogContent>
+			</EnterEnabledAlertDialogContent>
 		</AlertDialog>
 	);
 }
diff --git a/packages/ui/src/components/ui/alert-dialog.tsx b/packages/ui/src/components/ui/alert-dialog.tsx
index ced90f31e70..ab63ff68526 100644
--- a/packages/ui/src/components/ui/alert-dialog.tsx
+++ b/packages/ui/src/components/ui/alert-dialog.tsx
@@ -3,9 +3,13 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import type * as React from "react";
 
+import { focusEnterEnabledAlertDialogPrimaryAction } from "../../lib/focus-enter-enabled-alert-dialog-primary-action";
 import { cn } from "../../lib/utils";
 import { buttonVariants } from "./button";
 
+const alertDialogContentClassName =
+	"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg";
+
 function AlertDialog({
 	...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
@@ -53,10 +57,28 @@ function AlertDialogContent({
 			<AlertDialogOverlay />
 			<AlertDialogPrimitive.Content
 				data-slot="alert-dialog-content"
-				className={cn(
-					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-					className,
-				)}
+				className={cn(alertDialogContentClassName, className)}
+				{...props}
+			/>
+		</AlertDialogPortal>
+	);
+}
+
+function EnterEnabledAlertDialogContent({
+	className,
+	onOpenAutoFocus,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+	return (
+		<AlertDialogPortal>
+			<AlertDialogOverlay />
+			<AlertDialogPrimitive.Content
+				data-slot="alert-dialog-content"
+				className={cn(alertDialogContentClassName, className)}
+				onOpenAutoFocus={(event) => {
+					onOpenAutoFocus?.(event);
+					focusEnterEnabledAlertDialogPrimaryAction(event);
+				}}
 				{...props}
 			/>
 		</AlertDialogPortal>
@@ -148,6 +170,7 @@ export {
 	AlertDialogOverlay,
 	AlertDialogTrigger,
 	AlertDialogContent,
+	EnterEnabledAlertDialogContent,
 	AlertDialogHeader,
 	AlertDialogFooter,
 	AlertDialogTitle,
diff --git a/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.test.ts b/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.test.ts
new file mode 100644
index 00000000000..012b52fac2c
--- /dev/null
+++ b/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.test.ts
@@ -0,0 +1,72 @@
+import { describe, expect, test } from "bun:test";
+
+import {
+	alertDialogPrimaryActionSelector,
+	focusEnterEnabledAlertDialogPrimaryAction,
+} from "./focus-enter-enabled-alert-dialog-primary-action";
+
+describe("focusEnterEnabledAlertDialogPrimaryAction", () => {
+	test("focuses the marked primary action and prevents default autofocus", () => {
+		let prevented = false;
+		let focused = false;
+		let queriedSelector: string | null = null;
+
+		focusEnterEnabledAlertDialogPrimaryAction({
+			currentTarget: {
+				querySelector: (selector: string) => {
+					queriedSelector = selector;
+					return {
+						focus: () => {
+							focused = true;
+						},
+					};
+				},
+			},
+			defaultPrevented: false,
+			preventDefault: () => {
+				prevented = true;
+			},
+		});
+
+		expect(String(queriedSelector)).toBe(alertDialogPrimaryActionSelector);
+		expect(prevented).toBe(true);
+		expect(focused).toBe(true);
+	});
+
+	test("does nothing when no primary action is marked", () => {
+		let prevented = false;
+
+		focusEnterEnabledAlertDialogPrimaryAction({
+			currentTarget: {
+				querySelector: () => null,
+			},
+			defaultPrevented: false,
+			preventDefault: () => {
+				prevented = true;
+			},
+		});
+
+		expect(prevented).toBe(false);
+	});
+
+	test("respects an already prevented autofocus event", () => {
+		let queried = false;
+		let prevented = false;
+
+		focusEnterEnabledAlertDialogPrimaryAction({
+			currentTarget: {
+				querySelector: () => {
+					queried = true;
+					return null;
+				},
+			},
+			defaultPrevented: true,
+			preventDefault: () => {
+				prevented = true;
+			},
+		});
+
+		expect(queried).toBe(false);
+		expect(prevented).toBe(false);
+	});
+});
diff --git a/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.ts b/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.ts
new file mode 100644
index 00000000000..e18aeef0d39
--- /dev/null
+++ b/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.ts
@@ -0,0 +1,52 @@
+export const alertDialogPrimaryActionSelector =
+	"[data-alert-dialog-primary-action]:not([disabled])";
+
+interface FocusableLike {
+	focus: () => void;
+}
+
+interface EnterEnabledAlertDialogCurrentTargetLike {
+	querySelector: (selector: string) => FocusableLike | null;
+}
+
+type EnterEnabledAlertDialogCurrentTarget =
+	| EnterEnabledAlertDialogCurrentTargetLike
+	| EventTarget
+	| null;
+
+interface EnterEnabledAlertDialogOpenAutoFocusEventLike {
+	currentTarget: EnterEnabledAlertDialogCurrentTarget;
+	defaultPrevented: boolean;
+	preventDefault: () => void;
+}
+
+function isEnterEnabledAlertDialogCurrentTargetLike(
+	target: EnterEnabledAlertDialogCurrentTarget,
+): target is EnterEnabledAlertDialogCurrentTargetLike {
+	return (
+		!!target &&
+		typeof (target as { querySelector?: unknown }).querySelector === "function"
+	);
+}
+
+export function focusEnterEnabledAlertDialogPrimaryAction(
+	event: EnterEnabledAlertDialogOpenAutoFocusEventLike,
+) {
+	if (
+		event.defaultPrevented ||
+		!isEnterEnabledAlertDialogCurrentTargetLike(event.currentTarget)
+	) {
+		return;
+	}
+
+	const primaryAction = event.currentTarget.querySelector(
+		alertDialogPrimaryActionSelector,
+	);
+
+	if (!primaryAction) {
+		return;
+	}
+
+	event.preventDefault();
+	primaryAction.focus();
+}

From 9603c27ead66c3488d706f418dce3a131fce402f Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Sun, 29 Mar 2026 12:36:04 -0700
Subject: [PATCH 2/2] Use AlertDialogAction for enter focus

---
 .../ProjectSection/CloseProjectDialog.tsx       | 13 ++++---------
 .../FileViewerPane/UnsavedChangesDialog.tsx     | 17 ++++++-----------
 .../RightSidebar/ChangesView/ChangesView.tsx    | 13 +++++--------
 .../DiscardConfirmDialog.tsx                    | 11 ++++-------
 packages/ui/src/components/ui/alert-dialog.tsx  |  9 +++++++--
 ...-enabled-alert-dialog-primary-action.test.ts |  2 +-
 ...enter-enabled-alert-dialog-primary-action.ts |  2 +-
 7 files changed, 28 insertions(+), 39 deletions(-)

diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/CloseProjectDialog.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/CloseProjectDialog.tsx
index 6e1f11059ca..34046ff8587 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/CloseProjectDialog.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/CloseProjectDialog.tsx
@@ -1,5 +1,6 @@
 import {
 	AlertDialog,
+	AlertDialogAction,
 	AlertDialogDescription,
 	AlertDialogFooter,
 	AlertDialogHeader,
@@ -23,11 +24,6 @@ export function CloseProjectDialog({
 	onOpenChange,
 	onConfirm,
 }: CloseProjectDialogProps) {
-	const handleConfirm = () => {
-		onOpenChange(false);
-		onConfirm();
-	};
-
 	return (
 		<AlertDialog open={open} onOpenChange={onOpenChange}>
 			<EnterEnabledAlertDialogContent className="max-w-[340px] gap-0 p-0">
@@ -58,15 +54,14 @@ export function CloseProjectDialog({
 					>
 						Cancel
 					</Button>
-					<Button
-						data-alert-dialog-primary-action
+					<AlertDialogAction
 						variant="destructive"
 						size="sm"
 						className="h-7 px-3 text-xs"
-						onClick={handleConfirm}
+						onClick={onConfirm}
 					>
 						Close Project
-					</Button>
+					</AlertDialogAction>
 				</AlertDialogFooter>
 			</EnterEnabledAlertDialogContent>
 		</AlertDialog>
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/UnsavedChangesDialog.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/UnsavedChangesDialog.tsx
index 2fc01c985b0..38e9d03ef72 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/UnsavedChangesDialog.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/FileViewerPane/UnsavedChangesDialog.tsx
@@ -34,16 +34,12 @@ export function UnsavedChangesDialog({
 	discardLabel = "Discard & Continue",
 	saveLabel = "Save & Continue",
 }: UnsavedChangesDialogProps) {
-	const handleSaveAndSwitch = (e: React.MouseEvent) => {
-		e.preventDefault();
+	const handleSaveAndSwitch = () => {
 		onSave();
-		// Don't close dialog - parent will close on success
 	};
 
-	const handleDiscardAndSwitch = (e: React.MouseEvent) => {
-		e.preventDefault();
+	const handleDiscardAndSwitch = () => {
 		onDiscard();
-		onOpenChange(false);
 	};
 
 	return (
@@ -55,16 +51,15 @@ export function UnsavedChangesDialog({
 				</AlertDialogHeader>
 				<AlertDialogFooter>
 					<AlertDialogCancel disabled={isSaving}>Cancel</AlertDialogCancel>
-					<Button
-						data-alert-dialog-primary-action
+					<AlertDialogAction
 						variant="outline"
 						onClick={handleDiscardAndSwitch}
 						disabled={isSaving}
 						className="border-destructive/50 text-destructive hover:bg-destructive/10"
 					>
 						{discardLabel}
-					</Button>
-					<AlertDialogAction onClick={handleSaveAndSwitch} disabled={isSaving}>
+					</AlertDialogAction>
+					<Button onClick={handleSaveAndSwitch} disabled={isSaving}>
 						{isSaving ? (
 							<>
 								<LuLoader className="mr-2 h-4 w-4 animate-spin" />
@@ -73,7 +68,7 @@ export function UnsavedChangesDialog({
 						) : (
 							saveLabel
 						)}
-					</AlertDialogAction>
+					</Button>
 				</AlertDialogFooter>
 			</EnterEnabledAlertDialogContent>
 		</AlertDialog>
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/ChangesView.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/ChangesView.tsx
index d24ad9d03e5..42c5aa2154e 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/ChangesView.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/ChangesView.tsx
@@ -1,5 +1,6 @@
 import {
 	AlertDialog,
+	AlertDialogAction,
 	AlertDialogDescription,
 	AlertDialogFooter,
 	AlertDialogHeader,
@@ -857,20 +858,18 @@ export function ChangesView({
 						>
 							Cancel
 						</Button>
-						<Button
-							data-alert-dialog-primary-action
+						<AlertDialogAction
 							variant="destructive"
 							size="sm"
 							className="h-7 px-3 text-xs"
 							onClick={() => {
-								setShowDiscardUnstagedDialog(false);
 								discardAllUnstagedMutation.mutate({
 									worktreePath: worktreePath || "",
 								});
 							}}
 						>
 							Discard All
-						</Button>
+						</AlertDialogAction>
 					</AlertDialogFooter>
 				</EnterEnabledAlertDialogContent>
 			</AlertDialog>
@@ -898,20 +897,18 @@ export function ChangesView({
 						>
 							Cancel
 						</Button>
-						<Button
-							data-alert-dialog-primary-action
+						<AlertDialogAction
 							variant="destructive"
 							size="sm"
 							className="h-7 px-3 text-xs"
 							onClick={() => {
-								setShowDiscardStagedDialog(false);
 								discardAllStagedMutation.mutate({
 									worktreePath: worktreePath || "",
 								});
 							}}
 						>
 							Discard All
-						</Button>
+						</AlertDialogAction>
 					</AlertDialogFooter>
 				</EnterEnabledAlertDialogContent>
 			</AlertDialog>
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/DiscardConfirmDialog/DiscardConfirmDialog.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/DiscardConfirmDialog/DiscardConfirmDialog.tsx
index c17ef011792..2055c5aaf83 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/DiscardConfirmDialog/DiscardConfirmDialog.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/DiscardConfirmDialog/DiscardConfirmDialog.tsx
@@ -1,5 +1,6 @@
 import {
 	AlertDialog,
+	AlertDialogAction,
 	AlertDialogDescription,
 	AlertDialogFooter,
 	AlertDialogHeader,
@@ -43,19 +44,15 @@ export function DiscardConfirmDialog({
 					>
 						Cancel
 					</Button>
-					<Button
-						data-alert-dialog-primary-action
+					<AlertDialogAction
 						variant="destructive"
 						size="sm"
 						className="h-7 px-3 text-xs"
 						disabled={confirmDisabled}
-						onClick={() => {
-							onOpenChange(false);
-							onConfirm();
-						}}
+						onClick={onConfirm}
 					>
 						{confirmLabel}
-					</Button>
+					</AlertDialogAction>
 				</AlertDialogFooter>
 			</EnterEnabledAlertDialogContent>
 		</AlertDialog>
diff --git a/packages/ui/src/components/ui/alert-dialog.tsx b/packages/ui/src/components/ui/alert-dialog.tsx
index ab63ff68526..28bcedd6728 100644
--- a/packages/ui/src/components/ui/alert-dialog.tsx
+++ b/packages/ui/src/components/ui/alert-dialog.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type { VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
 import { focusEnterEnabledAlertDialogPrimaryAction } from "../../lib/focus-enter-enabled-alert-dialog-primary-action";
@@ -142,11 +143,15 @@ function AlertDialogDescription({
 
 function AlertDialogAction({
 	className,
+	size,
+	variant,
 	...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+	VariantProps<typeof buttonVariants>) {
 	return (
 		<AlertDialogPrimitive.Action
-			className={cn(buttonVariants(), className)}
+			data-slot="alert-dialog-action"
+			className={cn(buttonVariants({ variant, size, className }))}
 			{...props}
 		/>
 	);
diff --git a/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.test.ts b/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.test.ts
index 012b52fac2c..efb22a67770 100644
--- a/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.test.ts
+++ b/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.test.ts
@@ -6,7 +6,7 @@ import {
 } from "./focus-enter-enabled-alert-dialog-primary-action";
 
 describe("focusEnterEnabledAlertDialogPrimaryAction", () => {
-	test("focuses the marked primary action and prevents default autofocus", () => {
+	test("focuses the alert dialog action and prevents default autofocus", () => {
 		let prevented = false;
 		let focused = false;
 		let queriedSelector: string | null = null;
diff --git a/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.ts b/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.ts
index e18aeef0d39..f5ffb8cf87b 100644
--- a/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.ts
+++ b/packages/ui/src/lib/focus-enter-enabled-alert-dialog-primary-action.ts
@@ -1,5 +1,5 @@
 export const alertDialogPrimaryActionSelector =
-	"[data-alert-dialog-primary-action]:not([disabled])";
+	"[data-slot='alert-dialog-action']:not([disabled])";
 
 interface FocusableLike {
 	focus: () => void;