refactor(frontend): migrate Stack/Fleet confirms and Git source dialog (#951)

* refactor(frontend): migrate Stack/Fleet confirms and Git source dialog

- LocalUpdateConfirmDialog -> ConfirmModal with kicker LOCAL · UPDATE
- GitSourcePanel form -> Modal with kicker {STACK} · GIT SOURCE; the
  custom three-button footer (Remove / Pull now / Save) stays as-is
  since ModalFooter's two-slot pattern doesn't fit a left-aligned
  destructive action; ModalHeader provides the canonical chrome
- GitSourcePanel remove confirm -> destructive ConfirmModal with
  kicker {STACK} · GIT · DISCONNECT

* test(e2e): scope git-source dialog assertion to the heading

The migration adds a kicker rune "<STACK> · GIT SOURCE" inside the
dialog. The previous locator getByText('Git Source', { exact: false })
matched both the kicker (uppercase, mono) and the italic-serif title,
producing a strict-mode violation. Use getByRole('heading') to target
the title specifically.
This commit is contained in:
Anso
2026-05-06 20:19:07 -04:00
committed by GitHub
parent fe06838bf7
commit 9ab7819b24
3 changed files with 48 additions and 64 deletions
@@ -1,8 +1,5 @@
import { Download } from 'lucide-react';
import {
AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { ConfirmModal } from '@/components/ui/modal';
interface LocalUpdateConfirmDialogProps {
open: boolean;
@@ -12,23 +9,22 @@ interface LocalUpdateConfirmDialogProps {
export function LocalUpdateConfirmDialog({ open, onOpenChange, onConfirm }: LocalUpdateConfirmDialogProps) {
return (
<AlertDialog open={open} onOpenChange={onOpenChange}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Update local node?</AlertDialogTitle>
<AlertDialogDescription>
This will pull the latest Sencho image and restart the server. The dashboard will be
briefly disconnected and will automatically reconnect when the update completes.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={onConfirm}>
<Download className="w-4 h-4 mr-1.5" strokeWidth={1.5} />
Update &amp; Restart
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<ConfirmModal
open={open}
onOpenChange={onOpenChange}
kicker="LOCAL · UPDATE"
title="Update local node"
confirmLabel={
<>
<Download className="w-4 h-4 mr-1.5" strokeWidth={1.5} />
Update &amp; restart
</>
}
onConfirm={onConfirm}
>
<p className="text-sm text-stat-subtitle">
Pulls the latest Sencho image and restarts the server. The dashboard briefly disconnects and reconnects automatically when the update completes.
</p>
</ConfirmModal>
);
}