yunxiafei/openclaw-mission-control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace Dialog component with ConfirmActionDialog for improved confirmation handling

Browse Source
This commit is contained in:
Abhimanyu Saharan
2026-02-09 00:12:58 +05:30
parent 9a8fd3558d
commit 3a1cd654f1
5 changed files with 134 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/app/agents/page.tsx
View File

@@ -20,14 +20,7 @@ import { useQueryClient } from "@tanstack/react-query";
import { StatusPill } from "@/components/atoms/StatusPill"; import { StatusPill } from "@/components/atoms/StatusPill";
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button, buttonVariants } from "@/components/ui/button";
import { import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state"; import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
import { ApiError } from "@/api/mutator"; import { ApiError } from "@/api/mutator";
@@ -341,37 +334,25 @@ export default function AgentsPage() {
) : null} ) : null}
</DashboardPageLayout> </DashboardPageLayout>
<Dialog <ConfirmActionDialog
open={!!deleteTarget} open={!!deleteTarget}
onOpenChange={(nextOpen) => { onOpenChange={(open) => {
if (!nextOpen) { if (!open) {
setDeleteTarget(null); setDeleteTarget(null);
} }
}} }}
> ariaLabel="Delete agent"
<DialogContent aria-label="Delete agent"> title="Delete agent"
<DialogHeader> description={
<DialogTitle>Delete agent</DialogTitle> <>
<DialogDescription>
This will remove {deleteTarget?.name}. This action cannot be This will remove {deleteTarget?.name}. This action cannot be
undone. undone.
</DialogDescription> </>
</DialogHeader> }
{deleteMutation.error ? ( errorMessage={deleteMutation.error?.message}
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted"> onConfirm={handleDelete}
{deleteMutation.error.message} isConfirming={deleteMutation.isPending}
</div> />
) : null}
<DialogFooter>
<Button variant="outline" onClick={() => setDeleteTarget(null)}>
Cancel
</Button>
<Button onClick={handleDelete} disabled={deleteMutation.isPending}>
{deleteMutation.isPending ? "Deleting…" : "Delete"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</> </>
); );
} }

47
frontend/src/app/board-groups/page.tsx
View File

@@ -24,14 +24,7 @@ import {
import type { BoardGroupRead } from "@/api/generated/model"; import type { BoardGroupRead } from "@/api/generated/model";
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button, buttonVariants } from "@/components/ui/button";
import { import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { formatTimestamp } from "@/lib/formatters"; import { formatTimestamp } from "@/lib/formatters";
import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state"; import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
@@ -268,37 +261,25 @@ export default function BoardGroupsPage() {
<p className="mt-4 text-sm text-red-500">{groupsQuery.error.message}</p> <p className="mt-4 text-sm text-red-500">{groupsQuery.error.message}</p>
) : null} ) : null}
</DashboardPageLayout> </DashboardPageLayout>
<Dialog <ConfirmActionDialog
open={!!deleteTarget} open={!!deleteTarget}
onOpenChange={(nextOpen) => { onOpenChange={(open) => {
if (!nextOpen) { if (!open) {
setDeleteTarget(null); setDeleteTarget(null);
} }
}} }}
> ariaLabel="Delete board group"
<DialogContent aria-label="Delete board group"> title="Delete board group"
<DialogHeader> description={
<DialogTitle>Delete board group</DialogTitle> <>
<DialogDescription>
This will remove {deleteTarget?.name}. Boards will be ungrouped. This will remove {deleteTarget?.name}. Boards will be ungrouped.
This action cannot be undone. This action cannot be undone.
</DialogDescription> </>
</DialogHeader> }
{deleteMutation.error ? ( errorMessage={deleteMutation.error?.message}
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted"> onConfirm={handleDelete}
{deleteMutation.error.message} isConfirming={deleteMutation.isPending}
</div> />
) : null}
<DialogFooter>
<Button variant="outline" onClick={() => setDeleteTarget(null)}>
Cancel
</Button>
<Button onClick={handleDelete} disabled={deleteMutation.isPending}>
{deleteMutation.isPending ? "Deleting…" : "Delete"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</> </>
); );
} }

47
frontend/src/app/boards/page.tsx
View File

@@ -30,14 +30,7 @@ import { useOrganizationMembership } from "@/lib/use-organization-membership";
import type { BoardGroupRead, BoardRead } from "@/api/generated/model"; import type { BoardGroupRead, BoardRead } from "@/api/generated/model";
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button, buttonVariants } from "@/components/ui/button";
import { import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state"; import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
const compactId = (value: string) => const compactId = (value: string) =>
@@ -322,37 +315,25 @@ export default function BoardsPage() {
<p className="mt-4 text-sm text-red-500">{boardsQuery.error.message}</p> <p className="mt-4 text-sm text-red-500">{boardsQuery.error.message}</p>
) : null} ) : null}
</DashboardPageLayout> </DashboardPageLayout>
<Dialog <ConfirmActionDialog
open={!!deleteTarget} open={!!deleteTarget}
onOpenChange={(nextOpen) => { onOpenChange={(open) => {
if (!nextOpen) { if (!open) {
setDeleteTarget(null); setDeleteTarget(null);
} }
}} }}
> ariaLabel="Delete board"
<DialogContent aria-label="Delete board"> title="Delete board"
<DialogHeader> description={
<DialogTitle>Delete board</DialogTitle> <>
<DialogDescription>
This will remove {deleteTarget?.name}. This action cannot be This will remove {deleteTarget?.name}. This action cannot be
undone. undone.
</DialogDescription> </>
</DialogHeader> }
{deleteMutation.error ? ( errorMessage={deleteMutation.error?.message}
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted"> onConfirm={handleDelete}
{deleteMutation.error.message} isConfirming={deleteMutation.isPending}
</div> />
) : null}
<DialogFooter>
<Button variant="outline" onClick={() => setDeleteTarget(null)}>
Cancel
</Button>
<Button onClick={handleDelete} disabled={deleteMutation.isPending}>
{deleteMutation.isPending ? "Deleting…" : "Delete"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</> </>
); );
} }

44
frontend/src/app/gateways/page.tsx
View File

@@ -18,14 +18,7 @@ import { useQueryClient } from "@tanstack/react-query";
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout"; import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
import { Button, buttonVariants } from "@/components/ui/button"; import { Button, buttonVariants } from "@/components/ui/button";
import { import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state"; import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
import { ApiError } from "@/api/mutator"; import { ApiError } from "@/api/mutator";
@@ -294,33 +287,22 @@ export default function GatewaysPage() {
) : null} ) : null}
</DashboardPageLayout> </DashboardPageLayout>
<Dialog <ConfirmActionDialog
open={Boolean(deleteTarget)} open={Boolean(deleteTarget)}
onOpenChange={() => setDeleteTarget(null)} onOpenChange={() => setDeleteTarget(null)}
> title="Delete gateway?"
<DialogContent> description={
<DialogHeader> <>
<DialogTitle>Delete gateway?</DialogTitle>
<DialogDescription>
This removes the gateway connection from Mission Control. Boards This removes the gateway connection from Mission Control. Boards
using it will need a new gateway assigned. using it will need a new gateway assigned.
</DialogDescription> </>
</DialogHeader> }
{deleteMutation.error ? ( errorMessage={deleteMutation.error?.message}
<p className="text-sm text-red-500"> errorStyle="text"
{deleteMutation.error.message} cancelVariant="ghost"
</p> onConfirm={handleDelete}
) : null} isConfirming={deleteMutation.isPending}
<DialogFooter> />
<Button variant="ghost" onClick={() => setDeleteTarget(null)}>
Cancel
</Button>
<Button onClick={handleDelete} disabled={deleteMutation.isPending}>
{deleteMutation.isPending ? "Deleting…" : "Delete"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</> </>
); );
} }

71
frontend/src/components/ui/confirm-action-dialog.tsx Normal file
View File

@@ -0,0 +1,71 @@
import type { ReactNode } from "react";
import { Button, type ButtonProps } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
type ConfirmActionDialogProps = {
open: boolean;
onOpenChange: (open: boolean) => void;
title: string;
description: ReactNode;
onConfirm: () => void;
isConfirming: boolean;
errorMessage?: string | null;
confirmLabel?: string;
confirmingLabel?: string;
cancelLabel?: string;
cancelVariant?: NonNullable<ButtonProps["variant"]>;
errorStyle?: "text" | "panel";
ariaLabel?: string;
};
export function ConfirmActionDialog({
open,
onOpenChange,
title,
description,
onConfirm,
isConfirming,
errorMessage,
confirmLabel = "Delete",
confirmingLabel = "Deleting…",
cancelLabel = "Cancel",
cancelVariant = "outline",
errorStyle = "panel",
ariaLabel,
}: ConfirmActionDialogProps) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent aria-label={ariaLabel}>
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
<DialogDescription>{description}</DialogDescription>
</DialogHeader>
{errorMessage ? (
errorStyle === "text" ? (
<p className="text-sm text-red-500">{errorMessage}</p>
) : (
<div className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-3 text-xs text-muted">
{errorMessage}
</div>
)
) : null}
<DialogFooter>
<Button variant={cancelVariant} onClick={() => onOpenChange(false)}>
{cancelLabel}
</Button>
<Button onClick={onConfirm} disabled={isConfirming}>
{isConfirming ? confirmingLabel : confirmLabel}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}