From c7dcffbe095e8e0c7d3fd6ad997e5495c71ad9ce Mon Sep 17 00:00:00 2001
From: Levy Barbosa <marcio.barbosa@eletraenergy.com>
Date: Mon, 17 Aug 2026 15:56:15 -0300
Subject: [PATCH] Add confirmation dialog for purge operations, fix ambiguous
 purge icon

Purging a stream deleted all its messages immediately on click with no
confirmation, unlike the adjacent Delete action. Adds an AlertDialog
confirmation matching the existing delete-confirmation pattern, migrates
the DLQ purge dialog onto the same AlertDialog primitive for consistency,
and swaps the stream purge button's icon from RefreshCw (reads as a safe
refresh action) to Eraser.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/web/app/(dashboard)/dlq/page.tsx         | 42 +++++++++++--------
 .../streams/[clusterId]/[name]/page.tsx       | 30 ++++++++++++-
 2 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/apps/web/app/(dashboard)/dlq/page.tsx b/apps/web/app/(dashboard)/dlq/page.tsx
index e72b40c..e5f8500 100644
--- a/apps/web/app/(dashboard)/dlq/page.tsx
+++ b/apps/web/app/(dashboard)/dlq/page.tsx
@@ -26,6 +26,16 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import {
   Table,
   TableBody,
@@ -501,29 +511,27 @@ export default function DlqPage() {
       </Dialog>
 
       {/* Purge Dialog */}
-      <Dialog open={purgeDialogOpen} onOpenChange={setPurgeDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Purge DLQ Stream</DialogTitle>
-            <DialogDescription>
+      <AlertDialog open={purgeDialogOpen} onOpenChange={setPurgeDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Purge DLQ Stream</AlertDialogTitle>
+            <AlertDialogDescription>
               Are you sure you want to purge all messages from{' '}
               <strong>{selectedStreamForPurge?.streamName}</strong>? This action cannot be undone.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setPurgeDialogOpen(false)}>
-              Cancel
-            </Button>
-            <Button
-              variant="destructive"
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
               onClick={handleConfirmPurge}
               disabled={purgeMutation.isPending}
+              className="bg-red-600 hover:bg-red-700"
             >
               {purgeMutation.isPending ? 'Purging...' : 'Purge All Messages'}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/apps/web/app/(dashboard)/streams/[clusterId]/[name]/page.tsx b/apps/web/app/(dashboard)/streams/[clusterId]/[name]/page.tsx
index f9b6a57..2b9f1e8 100644
--- a/apps/web/app/(dashboard)/streams/[clusterId]/[name]/page.tsx
+++ b/apps/web/app/(dashboard)/streams/[clusterId]/[name]/page.tsx
@@ -12,6 +12,7 @@ import {
   MessageSquare,
   RefreshCw,
   Trash2,
+  Eraser,
   Edit,
   Play,
   AlertTriangle,
@@ -101,6 +102,7 @@ function StreamDetailContent() {
   const [messageSubject, setMessageSubject] = useState('');
   const [messageData, setMessageData] = useState('');
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showPurgeDialog, setShowPurgeDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [copiedMessageId, setCopiedMessageId] = useState<number | null>(null);
   const [expandedMessages, setExpandedMessages] = useState<Set<number>>(new Set());
@@ -439,10 +441,10 @@ function StreamDetailContent() {
           <Button
             variant="outline"
             size="sm"
-            onClick={() => purgeMutation.mutate()}
+            onClick={() => setShowPurgeDialog(true)}
             disabled={purgeMutation.isPending}
           >
-            <RefreshCw className="h-4 w-4" />
+            <Eraser className="h-4 w-4" />
             Purge
           </Button>
           <Button
@@ -478,6 +480,30 @@ function StreamDetailContent() {
         </AlertDialogContent>
       </AlertDialog>
 
+      {/* Purge Confirmation Dialog */}
+      <AlertDialog open={showPurgeDialog} onOpenChange={setShowPurgeDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Purge Stream</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to purge all messages from stream &quot;{streamName}&quot;? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                purgeMutation.mutate();
+                setShowPurgeDialog(false);
+              }}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {purgeMutation.isPending ? 'Purging...' : 'Purge'}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
       {/* Edit Stream Dialog */}
       <CreateStreamDialog
         open={showEditDialog}