fix(dashboard): F-U-007 ConfirmModal for route deletion (replace native confirm/alert)

scripts/[id]'s removeRoute used window.confirm('Delete this route?')
and surfaced errors via window.alert(). The rest of the dashboard had
adopted ConfirmModal for this exact case — the browser modal was
unstyled, couldn't show route detail, and the alert dead-end made
errors hard to recover from.

Rebuild around ConfirmModal:
- requestRemoveRoute(route) opens the modal carrying the full Route.
- The modal body shows `method path` plus `on host` if host-bound.
- A muted line explains the consequence ("Existing inbound requests
  will 404 on this path immediately").
- Errors surface inline via removeRouteError instead of `alert()`.

AUDIT.md anchor: F-U-007.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
2026-06-07 21:01:15 +02:00
parent 37c21f0efd
commit c072d0474c

View File

@@ -278,13 +278,30 @@
}
}
async function removeRoute(routeId: string) {
if (!confirm('Delete this route?')) return;
// F-U-007: ConfirmModal replaces the native confirm/alert flow so
// the route detail is in the body and any error gets an inline
// region instead of an unstyled browser modal.
let routeToRemove = $state<Route | null>(null);
let removingRoute = $state(false);
let removeRouteError = $state<string | null>(null);
function requestRemoveRoute(route: Route) {
routeToRemove = route;
removeRouteError = null;
}
async function confirmRemoveRoute() {
if (!routeToRemove) return;
removingRoute = true;
removeRouteError = null;
try {
await api.routes.remove(routeId);
await api.routes.remove(routeToRemove.id);
routeToRemove = null;
await loadRoutes();
} catch (e) {
alert(e instanceof Error ? e.message : String(e));
removeRouteError = e instanceof Error ? e.message : String(e);
} finally {
removingRoute = false;
}
}
@@ -679,7 +696,7 @@
</span>
<span class="path">{r.path}</span>
{#if canWrite}
<button type="button" class="link danger" onclick={() => removeRoute(r.id)}>
<button type="button" class="link danger" onclick={() => requestRemoveRoute(r)}>
remove
</button>
{/if}
@@ -841,6 +858,29 @@
</section>
{/if}
{#if routeToRemove}
<!-- F-U-007: route delete confirm modal, replacing native confirm/alert. -->
<ConfirmModal
title="Delete route"
variant="danger"
confirmLabel="Delete route"
busyLabel="Deleting…"
busy={removingRoute}
onConfirm={confirmRemoveRoute}
onCancel={() => (routeToRemove = null)}
>
<p>
Delete route
<code>{routeToRemove.method ?? 'ANY'} {routeToRemove.path}</code>
{#if routeToRemove.host}on <code>{routeToRemove.host}</code>{/if}?
</p>
<p class="muted">Existing inbound requests will start 404'ing on this path immediately.</p>
{#if removeRouteError}
<p class="modal-error">{removeRouteError}</p>
{/if}
</ConfirmModal>
{/if}
{#if confirmingDelete && script}
<ConfirmModal
title="Delete script “{script.name}”"