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) {
|
// F-U-007: ConfirmModal replaces the native confirm/alert flow so
|
||||||
if (!confirm('Delete this route?')) return;
|
// 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 {
|
try {
|
||||||
await api.routes.remove(routeId);
|
await api.routes.remove(routeToRemove.id);
|
||||||
|
routeToRemove = null;
|
||||||
await loadRoutes();
|
await loadRoutes();
|
||||||
} catch (e) {
|
} 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>
|
||||||
<span class="path">{r.path}</span>
|
<span class="path">{r.path}</span>
|
||||||
{#if canWrite}
|
{#if canWrite}
|
||||||
<button type="button" class="link danger" onclick={() => removeRoute(r.id)}>
|
<button type="button" class="link danger" onclick={() => requestRemoveRoute(r)}>
|
||||||
remove
|
remove
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
@@ -841,6 +858,29 @@
|
|||||||
</section>
|
</section>
|
||||||
{/if}
|
{/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}
|
{#if confirmingDelete && script}
|
||||||
<ConfirmModal
|
<ConfirmModal
|
||||||
title="Delete script “{script.name}”"
|
title="Delete script “{script.name}”"
|
||||||
|
|||||||
Reference in New Issue
Block a user