From 19535d97717283cc81f4eb38ac27b9ef0c0aff11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kayla=20=E3=81=AF=E3=81=AA?= <mckayla@hey.com>
Date: Thu, 30 Apr 2026 18:13:25 -0600
Subject: [PATCH] refactor: add modern `DialogActions` component (#24856)

---
 site/.knip.jsonc                      |  1 +
 site/src/components/Dialog/Dialog.tsx | 68 +++++++++++++++++++++++++++
 2 files changed, 69 insertions(+)

diff --git a/site/.knip.jsonc b/site/.knip.jsonc
index 628d6a8194..d12174a6f9 100644
--- a/site/.knip.jsonc
+++ b/site/.knip.jsonc
@@ -7,6 +7,7 @@
 		"./test/**/*.ts",
 		"./e2e/**/*.ts"
 	],
+	"tags": ["-lintignore"],
 	"ignore": [
 		"**/*Generated.ts",
 		"src/api/chatModelOptions.ts",
diff --git a/site/src/components/Dialog/Dialog.tsx b/site/src/components/Dialog/Dialog.tsx
index 1e212f8614..344c346f7e 100644
--- a/site/src/components/Dialog/Dialog.tsx
+++ b/site/src/components/Dialog/Dialog.tsx
@@ -4,6 +4,8 @@
  */
 import { cva, type VariantProps } from "class-variance-authority";
 import { Dialog as DialogPrimitive } from "radix-ui";
+import { Button } from "#/components/Button/Button";
+import { Spinner } from "#/components/Spinner/Spinner";
 import { cn } from "#/utils/cn";
 
 export const Dialog = DialogPrimitive.Root;
@@ -106,6 +108,72 @@ export const DialogFooter: React.FC<React.ComponentPropsWithRef<"div">> = ({
 	);
 };
 
+/**
+ * @lintignore I'll be using this right away in another PR, just trying to break things up
+ */
+export interface DialogActionsProps {
+	/** Text to display in the confirm button */
+	confirmText?: React.ReactNode;
+	/** Whether or not confirm is loading, also disables cancel when true */
+	confirmLoading?: boolean;
+	/** Whether or not the submit button is disabled */
+	confirmDisabled?: boolean;
+	/** Whether the confirm button triggers a destructive action or not */
+	confirmVariant?: React.ComponentProps<typeof Button>["variant"];
+	/** Called when confirm is clicked */
+	onConfirm?: () => void;
+
+	/** Text to display in the cancel button */
+	cancelText?: string;
+	/** Called when cancel is clicked */
+	onCancel?: () => void;
+}
+
+/**
+ * Quickly handles most modals actions, some combination of a cancel and confirm button
+ * @lintignore I'll be using this right away in another PR, just trying to break things up
+ */
+export const DialogActions: React.FC<DialogActionsProps> = ({
+	confirmText = "Confirm",
+	confirmLoading = false,
+	confirmDisabled = false,
+	confirmVariant,
+	onConfirm,
+
+	cancelText = "Cancel",
+	onCancel,
+}) => {
+	return (
+		<>
+			{onCancel && (
+				<Button
+					disabled={confirmLoading}
+					onClick={(e) => {
+						e.stopPropagation();
+						onCancel();
+					}}
+					variant="outline"
+				>
+					{cancelText}
+				</Button>
+			)}
+
+			{onConfirm && (
+				<Button
+					variant={confirmVariant}
+					disabled={confirmLoading || confirmDisabled}
+					onClick={onConfirm}
+					data-testid="confirm-button"
+					type="submit"
+				>
+					<Spinner loading={confirmLoading} />
+					{confirmText}
+				</Button>
+			)}
+		</>
+	);
+};
+
 export const DialogTitle: React.FC<
 	React.ComponentPropsWithRef<typeof DialogPrimitive.Title>
 > = ({ className, ...props }) => {