From 5003141bac33e4d661481853479d9a9089a5f326 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Fri, 12 Dec 2025 11:51:37 +0100
Subject: [PATCH] feat: delete action resend ux (#1636)

---
 .../(dashboard)/monitors/[id]/nav-actions.tsx |  3 +-
 .../status-pages/[id]/nav-actions.tsx         |  7 +--
 .../incidents/data-table-row-actions.tsx      |  3 +-
 .../maintenances/data-table-row-actions.tsx   |  3 +-
 .../monitors/data-table-action-bar.tsx        | 28 +++++++----
 .../monitors/data-table-row-actions.tsx       |  3 +-
 .../notifications/data-table-row-actions.tsx  |  3 +-
 .../data-table-row-actions.tsx                |  3 +-
 .../settings/invitations/data-table.tsx       |  2 +-
 .../settings/members/data-table.tsx           |  3 +-
 .../status-pages/data-table-row-actions.tsx   |  3 +-
 .../data-table-row-actions.tsx                |  2 +-
 .../status-reports/data-table-row-actions.tsx |  2 +-
 .../subscribers/data-table-row-actions.tsx    |  2 +-
 .../components/dropdowns/quick-actions.tsx    | 46 +++++++++++++------
 .../components/forms/form-alert-dialog.tsx    | 26 +++++++----
 .../forms/monitor/form-danger-zone.tsx        |  6 +--
 .../forms/settings/form-api-key.tsx           |  3 +-
 .../forms/status-page/form-danger-zone.tsx    |  6 +--
 .../src/components/nav/nav-monitors.tsx       |  3 +-
 .../src/components/nav/nav-status-pages.tsx   |  3 +-
 21 files changed, 91 insertions(+), 69 deletions(-)

diff --git a/apps/dashboard/src/app/(dashboard)/monitors/[id]/nav-actions.tsx b/apps/dashboard/src/app/(dashboard)/monitors/[id]/nav-actions.tsx
index 1d61aafb..20d2d2a4 100644
--- a/apps/dashboard/src/app/(dashboard)/monitors/[id]/nav-actions.tsx
+++ b/apps/dashboard/src/app/(dashboard)/monitors/[id]/nav-actions.tsx
@@ -195,8 +195,7 @@ export function NavActions() {
       <QuickActions
         actions={actions}
         deleteAction={{
-          title: monitor.name,
-          confirmationValue: "delete monitor",
+          confirmationValue: monitor.name ?? "monitor",
           submitAction: async () => {
             await deleteMonitorMutation.mutateAsync({
               id: Number.parseInt(id),
diff --git a/apps/dashboard/src/app/(dashboard)/status-pages/[id]/nav-actions.tsx b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/nav-actions.tsx
index f8695524..019f05e8 100644
--- a/apps/dashboard/src/app/(dashboard)/status-pages/[id]/nav-actions.tsx
+++ b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/nav-actions.tsx
@@ -58,7 +58,9 @@ export function NavActions() {
           <TooltipTrigger asChild>
             <Button variant="ghost" size="sm" className="group h-7 w-7" asChild>
               <a
-                href={`https://${statusPage.customDomain || `${statusPage.slug}.openstatus.dev`}`}
+                href={`https://${
+                  statusPage.customDomain || `${statusPage.slug}.openstatus.dev`
+                }`}
                 target="_blank"
                 rel="noreferrer"
               >
@@ -72,8 +74,7 @@ export function NavActions() {
       <QuickActions
         actions={actions}
         deleteAction={{
-          title: statusPage.title,
-          confirmationValue: "delete status page",
+          confirmationValue: statusPage.title ?? "status page",
           submitAction: async () => {
             await deleteStatusPageMutation.mutateAsync({
               id: Number.parseInt(id),
diff --git a/apps/dashboard/src/components/data-table/incidents/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/incidents/data-table-row-actions.tsx
index d19b0078..8fe685de 100644
--- a/apps/dashboard/src/components/data-table/incidents/data-table-row-actions.tsx
+++ b/apps/dashboard/src/components/data-table/incidents/data-table-row-actions.tsx
@@ -109,8 +109,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
       <QuickActions
         actions={actions}
         deleteAction={{
-          title: row.original.title,
-          confirmationValue: "delete incident",
+          confirmationValue: row.original.title ?? "incident",
           submitAction: async () => {
             await deleteIncidentMutation.mutateAsync({
               id: row.original.id,
diff --git a/apps/dashboard/src/components/data-table/maintenances/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/maintenances/data-table-row-actions.tsx
index 23f8ece5..3bb1d46e 100644
--- a/apps/dashboard/src/components/data-table/maintenances/data-table-row-actions.tsx
+++ b/apps/dashboard/src/components/data-table/maintenances/data-table-row-actions.tsx
@@ -55,8 +55,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
       <QuickActions
         actions={actions}
         deleteAction={{
-          title: row.original.title,
-          confirmationValue: "delete",
+          confirmationValue: row.original.title ?? "maintenance",
           submitAction: async () => {
             await deleteMaintenanceMutation.mutateAsync({
               id: row.original.id,
diff --git a/apps/dashboard/src/components/data-table/monitors/data-table-action-bar.tsx b/apps/dashboard/src/components/data-table/monitors/data-table-action-bar.tsx
index 3616183b..108ab13e 100644
--- a/apps/dashboard/src/components/data-table/monitors/data-table-action-bar.tsx
+++ b/apps/dashboard/src/components/data-table/monitors/data-table-action-bar.tsx
@@ -2,7 +2,7 @@
 
 import { SelectTrigger } from "@radix-ui/react-select";
 import type { Table } from "@tanstack/react-table";
-import { CheckCircle2, Trash2 } from "lucide-react";
+import { Check, CheckCircle2, Copy, Trash2 } from "lucide-react";
 import * as React from "react";
 
 import {
@@ -34,7 +34,9 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
 
 type Monitor = RouterOutputs["monitor"]["list"][number];
 
@@ -53,6 +55,7 @@ export function MonitorDataTableActionBar({
   const [open, setOpen] = React.useState(false);
   const [isPending, startTransition] = React.useTransition();
   const [value, setValue] = React.useState("");
+  const { copy, isCopied } = useCopyToClipboard();
   const rows = table.getFilteredSelectedRowModel().rows;
   const trpc = useTRPC();
   const queryClient = useQueryClient();
@@ -82,8 +85,8 @@ export function MonitorDataTableActionBar({
   );
 
   const confirmationValue = React.useMemo(
-    () => `delete monitor${rows.length === 1 ? "" : "s"}`,
-    [rows.length],
+    () => rows.map((row) => row.original.name).join(", "),
+    [rows],
   );
 
   const handleDelete = async () => {
@@ -183,11 +186,20 @@ export function MonitorDataTableActionBar({
                 selected monitor(s) from the database.
               </AlertDialogDescription>
             </AlertDialogHeader>
-            <form id="form-alert-dialog" className="space-y-0.5">
-              <p className="text-muted-foreground text-xs">
-                Please write &apos;
-                <span className="font-semibold">{confirmationValue}</span>
-                &apos; to confirm
+            <form id="form-alert-dialog" className="space-y-1.5">
+              <p className="text-muted-foreground text-sm">
+                Type{" "}
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  type="button"
+                  className="font-normal [&_svg]:size-3"
+                  onClick={() => copy(confirmationValue, { withToast: false })}
+                >
+                  {confirmationValue}
+                  {isCopied ? <Check /> : <Copy />}
+                </Button>{" "}
+                to confirm
               </p>
               <Input value={value} onChange={(e) => setValue(e.target.value)} />
             </form>
diff --git a/apps/dashboard/src/components/data-table/monitors/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/monitors/data-table-row-actions.tsx
index 92bb546b..60ee554f 100644
--- a/apps/dashboard/src/components/data-table/monitors/data-table-row-actions.tsx
+++ b/apps/dashboard/src/components/data-table/monitors/data-table-row-actions.tsx
@@ -42,8 +42,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
       <QuickActions
         actions={actions}
         deleteAction={{
-          title: row.original.name,
-          confirmationValue: "delete monitor",
+          confirmationValue: row.original.name ?? "monitor",
           submitAction: async () => {
             await deleteMonitorMutation.mutateAsync({
               id: row.original.id,
diff --git a/apps/dashboard/src/components/data-table/notifications/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/notifications/data-table-row-actions.tsx
index e24d3481..96b69868 100644
--- a/apps/dashboard/src/components/data-table/notifications/data-table-row-actions.tsx
+++ b/apps/dashboard/src/components/data-table/notifications/data-table-row-actions.tsx
@@ -47,8 +47,7 @@ export function DataTableRowActions(props: DataTableRowActionsProps) {
       <QuickActions
         actions={actions}
         deleteAction={{
-          title: props.row.original.name,
-          confirmationValue: "delete notifier",
+          confirmationValue: props.row.original.name ?? "notifier",
           submitAction: async () => {
             await deleteNotifierMutation.mutateAsync({
               id: props.row.original.id,
diff --git a/apps/dashboard/src/components/data-table/private-locations/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/private-locations/data-table-row-actions.tsx
index 865808d4..6dc0a39d 100644
--- a/apps/dashboard/src/components/data-table/private-locations/data-table-row-actions.tsx
+++ b/apps/dashboard/src/components/data-table/private-locations/data-table-row-actions.tsx
@@ -47,8 +47,7 @@ export function DataTableRowActions(props: DataTableRowActionsProps) {
       <QuickActions
         actions={actions}
         deleteAction={{
-          title: props.row.original.name,
-          confirmationValue: "delete private location",
+          confirmationValue: props.row.original.name ?? "private location",
           submitAction: async () => {
             await deletePrivateLocationMutation.mutateAsync({
               id: props.row.original.id,
diff --git a/apps/dashboard/src/components/data-table/settings/invitations/data-table.tsx b/apps/dashboard/src/components/data-table/settings/invitations/data-table.tsx
index b58ea0bc..46b18363 100644
--- a/apps/dashboard/src/components/data-table/settings/invitations/data-table.tsx
+++ b/apps/dashboard/src/components/data-table/settings/invitations/data-table.tsx
@@ -70,7 +70,7 @@ export function DataTable() {
               <div className="flex justify-end">
                 <QuickActions
                   deleteAction={{
-                    title: item.email,
+                    confirmationValue: item.email ?? "invitation",
                     submitAction: async () =>
                       deleteInvitationMutation.mutateAsync({ id: item.id }),
                   }}
diff --git a/apps/dashboard/src/components/data-table/settings/members/data-table.tsx b/apps/dashboard/src/components/data-table/settings/members/data-table.tsx
index 001c0d56..80819849 100644
--- a/apps/dashboard/src/components/data-table/settings/members/data-table.tsx
+++ b/apps/dashboard/src/components/data-table/settings/members/data-table.tsx
@@ -52,8 +52,7 @@ export function DataTable() {
               <div className="flex justify-end">
                 <QuickActions
                   deleteAction={{
-                    title: item.user?.email ?? "",
-                    confirmationValue: "delete member",
+                    confirmationValue: item.user.email ?? "user",
                     // FIXME: when deleting myself, throws an error, should have been caught by the toast.error
                     submitAction: async () =>
                       await deleteMemberMutation.mutateAsync({
diff --git a/apps/dashboard/src/components/data-table/status-pages/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/status-pages/data-table-row-actions.tsx
index 19bff8e0..59363bcb 100644
--- a/apps/dashboard/src/components/data-table/status-pages/data-table-row-actions.tsx
+++ b/apps/dashboard/src/components/data-table/status-pages/data-table-row-actions.tsx
@@ -40,8 +40,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
     <QuickActions
       actions={actions}
       deleteAction={{
-        title: row.original.title,
-        confirmationValue: "delete status page",
+        confirmationValue: row.original.title ?? "status page",
         submitAction: async () => {
           await deleteStatusPageMutation.mutateAsync({
             id: row.original.id,
diff --git a/apps/dashboard/src/components/data-table/status-report-updates/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/status-report-updates/data-table-row-actions.tsx
index 462d3801..32a310b2 100644
--- a/apps/dashboard/src/components/data-table/status-report-updates/data-table-row-actions.tsx
+++ b/apps/dashboard/src/components/data-table/status-report-updates/data-table-row-actions.tsx
@@ -55,7 +55,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
       <QuickActions
         actions={actions}
         deleteAction={{
-          title: String(row.id),
+          confirmationValue: row.status ?? "status report update",
           submitAction: async () => {
             await deleteStatusReportUpdateMutation.mutateAsync({
               id: row.id,
diff --git a/apps/dashboard/src/components/data-table/status-reports/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/status-reports/data-table-row-actions.tsx
index f0e481ae..cd0ac3ff 100644
--- a/apps/dashboard/src/components/data-table/status-reports/data-table-row-actions.tsx
+++ b/apps/dashboard/src/components/data-table/status-reports/data-table-row-actions.tsx
@@ -99,7 +99,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
       <QuickActions
         actions={actions}
         deleteAction={{
-          title: row.original.title,
+          confirmationValue: row.original.title ?? "status report",
           submitAction: async () => {
             await deleteStatusReportMutation.mutateAsync({
               id: row.original.id,
diff --git a/apps/dashboard/src/components/data-table/subscribers/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/subscribers/data-table-row-actions.tsx
index b7ce3ad4..43a17fc3 100644
--- a/apps/dashboard/src/components/data-table/subscribers/data-table-row-actions.tsx
+++ b/apps/dashboard/src/components/data-table/subscribers/data-table-row-actions.tsx
@@ -30,7 +30,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
     <QuickActions
       actions={[]}
       deleteAction={{
-        title: row.original.email,
+        confirmationValue: row.original.email ?? "subscriber",
         submitAction: async () => {
           await deleteAction.mutateAsync({
             id: row.original.id,
diff --git a/apps/dashboard/src/components/dropdowns/quick-actions.tsx b/apps/dashboard/src/components/dropdowns/quick-actions.tsx
index 691e9433..c81da3ee 100644
--- a/apps/dashboard/src/components/dropdowns/quick-actions.tsx
+++ b/apps/dashboard/src/components/dropdowns/quick-actions.tsx
@@ -3,7 +3,13 @@
 import type * as React from "react";
 import { useState, useTransition } from "react";
 
-import { type LucideIcon, MoreHorizontal, Trash2 } from "lucide-react";
+import {
+  Check,
+  Copy,
+  type LucideIcon,
+  MoreHorizontal,
+  Trash2,
+} from "lucide-react";
 
 import {
   AlertDialog,
@@ -27,6 +33,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
 import type { DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
 import { isTRPCClientError } from "@trpc/client";
 import { toast } from "sonner";
@@ -42,11 +49,10 @@ interface QuickActionsProps extends React.ComponentProps<typeof Button> {
     onClick?: () => Promise<void> | void;
   }[];
   deleteAction?: {
-    title: string;
     /**
-     * If set, an input field will require the user input to validate deletion
+     * The value that must be typed to confirm deletion. Also used in the dialog title.
      */
-    confirmationValue?: string;
+    confirmationValue: string;
     submitAction?: () => Promise<void>;
   };
 }
@@ -63,6 +69,7 @@ export function QuickActions({
   const [value, setValue] = useState("");
   const [isPending, startTransition] = useTransition();
   const [open, setOpen] = useState(false);
+  const { copy, isCopied } = useCopyToClipboard();
 
   const handleDelete = async () => {
     startTransition(async () => {
@@ -147,25 +154,36 @@ export function QuickActions({
       >
         <AlertDialogHeader>
           <AlertDialogTitle>
-            Are you sure about deleting `{deleteAction?.title}`?
+            Are you sure about deleting `{deleteAction?.confirmationValue}`?
           </AlertDialogTitle>
           <AlertDialogDescription>
             This action cannot be undone. This will permanently remove the entry
             from the database.
           </AlertDialogDescription>
         </AlertDialogHeader>
-        {deleteAction?.confirmationValue ? (
-          <form id="form-alert-dialog" className="space-y-0.5">
-            <p className="text-muted-foreground text-xs">
-              Please write &apos;
-              <span className="font-semibold">
-                {deleteAction?.confirmationValue}
-              </span>
-              &apos; to confirm
+        {deleteAction?.confirmationValue && (
+          <form id="form-alert-dialog" className="space-y-1.5">
+            <p className="text-muted-foreground text-sm">
+              Type{" "}
+              <Button
+                variant="secondary"
+                size="sm"
+                type="button"
+                className="font-normal [&_svg]:size-3"
+                onClick={() =>
+                  copy(deleteAction.confirmationValue || "", {
+                    withToast: false,
+                  })
+                }
+              >
+                {deleteAction.confirmationValue}
+                {isCopied ? <Check /> : <Copy />}
+              </Button>{" "}
+              to confirm
             </p>
             <Input value={value} onChange={(e) => setValue(e.target.value)} />
           </form>
-        ) : null}
+        )}
         <AlertDialogFooter>
           <AlertDialogCancel onClick={(e) => e.stopPropagation()}>
             Cancel
diff --git a/apps/dashboard/src/components/forms/form-alert-dialog.tsx b/apps/dashboard/src/components/forms/form-alert-dialog.tsx
index 055f5110..58eb4e7d 100644
--- a/apps/dashboard/src/components/forms/form-alert-dialog.tsx
+++ b/apps/dashboard/src/components/forms/form-alert-dialog.tsx
@@ -13,25 +13,26 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
 import { isTRPCClientError } from "@trpc/client";
+import { Check, Copy } from "lucide-react";
 import { useState, useTransition } from "react";
 import { toast } from "sonner";
 
 interface FormAlertDialogProps {
-  title: string;
   confirmationValue: string;
   submitAction: () => Promise<void>;
   children?: React.ReactNode;
 }
 
 export function FormAlertDialog({
-  title,
   confirmationValue,
   submitAction,
   children,
 }: FormAlertDialogProps) {
   const [value, setValue] = useState("");
   const [isPending, startTransition] = useTransition();
+  const { copy, isCopied } = useCopyToClipboard();
   const [open, setOpen] = useState(false);
 
   const handleDelete = async () => {
@@ -68,17 +69,26 @@ export function FormAlertDialog({
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>
-            Are you sure about delete `{title}`?
+            Are you sure about delete `{confirmationValue}`?
           </AlertDialogTitle>
           <AlertDialogDescription>
             This action cannot be undone. This will permanently delete the item.
           </AlertDialogDescription>
         </AlertDialogHeader>
-        <form id="form-alert-dialog" className="space-y-0.5">
-          <p className="text-muted-foreground text-xs">
-            Please write &apos;
-            <span className="font-semibold">{confirmationValue}</span>
-            &apos; to confirm
+        <form id="form-alert-dialog" className="space-y-1.5">
+          <p className="text-muted-foreground text-sm">
+            Type{" "}
+            <Button
+              variant="secondary"
+              size="sm"
+              type="button"
+              className="font-normal [&_svg]:size-3"
+              onClick={() => copy(confirmationValue, { withToast: false })}
+            >
+              {confirmationValue}
+              {isCopied ? <Check /> : <Copy />}
+            </Button>{" "}
+            to confirm
           </p>
           <Input value={value} onChange={(e) => setValue(e.target.value)} />
         </form>
diff --git a/apps/dashboard/src/components/forms/monitor/form-danger-zone.tsx b/apps/dashboard/src/components/forms/monitor/form-danger-zone.tsx
index 24dd8a5f..7708c583 100644
--- a/apps/dashboard/src/components/forms/monitor/form-danger-zone.tsx
+++ b/apps/dashboard/src/components/forms/monitor/form-danger-zone.tsx
@@ -23,11 +23,7 @@ export function FormDangerZone({
         <FormCardDescription>This action cannot be undone.</FormCardDescription>
       </FormCardHeader>
       <FormCardFooter variant="destructive" className="justify-end">
-        <FormAlertDialog
-          title={title}
-          confirmationValue="delete monitor"
-          submitAction={onSubmit}
-        />
+        <FormAlertDialog confirmationValue={title} submitAction={onSubmit} />
       </FormCardFooter>
     </FormCard>
   );
diff --git a/apps/dashboard/src/components/forms/settings/form-api-key.tsx b/apps/dashboard/src/components/forms/settings/form-api-key.tsx
index 80c3d88c..4c251dda 100644
--- a/apps/dashboard/src/components/forms/settings/form-api-key.tsx
+++ b/apps/dashboard/src/components/forms/settings/form-api-key.tsx
@@ -128,8 +128,7 @@ export function FormApiKey() {
           </Button>
         ) : (
           <FormAlertDialog
-            title="API Key"
-            confirmationValue="delete api key"
+            confirmationValue="API Key"
             submitAction={async () => {
               await revokeApiKeyMutation.mutateAsync({
                 keyId: apiKey.id,
diff --git a/apps/dashboard/src/components/forms/status-page/form-danger-zone.tsx b/apps/dashboard/src/components/forms/status-page/form-danger-zone.tsx
index 44032ca6..7708c583 100644
--- a/apps/dashboard/src/components/forms/status-page/form-danger-zone.tsx
+++ b/apps/dashboard/src/components/forms/status-page/form-danger-zone.tsx
@@ -23,11 +23,7 @@ export function FormDangerZone({
         <FormCardDescription>This action cannot be undone.</FormCardDescription>
       </FormCardHeader>
       <FormCardFooter variant="destructive" className="justify-end">
-        <FormAlertDialog
-          title={title}
-          confirmationValue="delete status page"
-          submitAction={onSubmit}
-        />
+        <FormAlertDialog confirmationValue={title} submitAction={onSubmit} />
       </FormCardFooter>
     </FormCard>
   );
diff --git a/apps/dashboard/src/components/nav/nav-monitors.tsx b/apps/dashboard/src/components/nav/nav-monitors.tsx
index 6fb7c976..6ddc4a99 100644
--- a/apps/dashboard/src/components/nav/nav-monitors.tsx
+++ b/apps/dashboard/src/components/nav/nav-monitors.tsx
@@ -188,8 +188,7 @@ export function NavMonitors() {
                 <QuickActions
                   actions={actions}
                   deleteAction={{
-                    title: item.name,
-                    confirmationValue: "delete monitor",
+                    confirmationValue: item.name ?? "monitor",
                     submitAction: async () => {
                       await deleteMonitorMutation.mutateAsync({
                         id: item.id,
diff --git a/apps/dashboard/src/components/nav/nav-status-pages.tsx b/apps/dashboard/src/components/nav/nav-status-pages.tsx
index 1303d264..efdff10f 100644
--- a/apps/dashboard/src/components/nav/nav-status-pages.tsx
+++ b/apps/dashboard/src/components/nav/nav-status-pages.tsx
@@ -160,8 +160,7 @@ export function NavStatusPages() {
                 <QuickActions
                   actions={actions}
                   deleteAction={{
-                    title: item.title,
-                    confirmationValue: "delete status page",
+                    confirmationValue: item.title ?? "status page",
                     submitAction: async () => {
                       await deleteStatusPage.mutateAsync({ id: item.id });
                       if (pathname.includes(`/status-pages/${item.id}`)) {
-- 
2.51.2