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:
@@ -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}”"
|
||||
|
||||
Reference in New Issue
Block a user