From 27205c65ef7260d640eeec0f36691812abfaf56e Mon Sep 17 00:00:00 2001 From: Anders Olsson Date: Wed, 10 Jun 2026 13:35:27 +0200 Subject: [PATCH] =?UTF-8?q?fix(web):=20disable=20delete=20confirms=20while?= =?UTF-8?q?=20pending=20+=20Signing=20in=E2=80=A6=20feedback=20(#70)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The delete dialogs (DeleteObjectDialog and the shared DeleteConfirmDialog) left their confirm button enabled during the in-flight request, so a double-click fired a second DELETE that 404'd and surfaced a spurious error. Disable cancel + confirm while pending and swap the confirm label to a new actions.deleting ("Deleting…" / "Tar bort…"). The login button disabled itself during login.isPending but kept the "Sign in" label; it now shows auth.signingIn ("Signing in…" / "Loggar in…") so slow networks get visible feedback. Each fix is covered by a gated-MSW (or gated-promise) test asserting the pending label + disabled state before releasing the request. Closes #70 Co-Authored-By: Claude Opus 4.8 --- web/src/auth/login-page.test.tsx | 25 ++++++++++++++++ web/src/auth/login-page.tsx | 2 +- .../components/delete-confirm-dialog.test.tsx | 25 ++++++++++++++++ web/src/components/delete-confirm-dialog.tsx | 10 +++++-- web/src/i18n/en.json | 4 +-- web/src/i18n/sv.json | 4 +-- web/src/objects/delete-object-dialog.test.tsx | 29 +++++++++++++++++++ web/src/objects/delete-object-dialog.tsx | 6 ++-- 8 files changed, 95 insertions(+), 10 deletions(-) diff --git a/web/src/auth/login-page.test.tsx b/web/src/auth/login-page.test.tsx index 0cf8a3c..14aa924 100644 --- a/web/src/auth/login-page.test.tsx +++ b/web/src/auth/login-page.test.tsx @@ -57,6 +57,31 @@ test("rejects an off-site from and falls back to /objects", async () => { expect(await screen.findByText("objects landing")).toBeInTheDocument(); }); +test("shows Signing in… and disables the button while pending", async () => { + let release!: () => void; + const gate = new Promise((r) => { + release = r; + }); + + server.use( + http.post("/api/admin/login", async () => { + await gate; + return new HttpResponse(null, { status: 204 }); + }), + ); + + renderApp(tree(), { route: "/login" }); + await userEvent.type(screen.getByLabelText(/email/i), "editor@example.com"); + await userEvent.type(screen.getByLabelText(/password/i), "pw-editor-123"); + await userEvent.click(screen.getByRole("button", { name: /sign in/i })); + + const pending = await screen.findByRole("button", { name: /signing in/i }); + expect(pending).toBeDisabled(); + + release(); + expect(await screen.findByText("objects landing")).toBeInTheDocument(); +}); + test("disables submit until both fields are filled", async () => { renderApp(tree(), { route: "/login" }); const button = screen.getByRole("button", { name: /sign in/i }); diff --git a/web/src/auth/login-page.tsx b/web/src/auth/login-page.tsx index f658cb6..e253d5b 100644 --- a/web/src/auth/login-page.tsx +++ b/web/src/auth/login-page.tsx @@ -77,7 +77,7 @@ export function LoginPage() {

)} diff --git a/web/src/components/delete-confirm-dialog.test.tsx b/web/src/components/delete-confirm-dialog.test.tsx index 9374ea5..8d0d46c 100644 --- a/web/src/components/delete-confirm-dialog.test.tsx +++ b/web/src/components/delete-confirm-dialog.test.tsx @@ -20,6 +20,31 @@ test("delete-in-use shows the in-use count and keeps the dialog open", async () expect(dialog.getByText("Delete this term?")).toBeInTheDocument(); }); +test("confirm is disabled and labelled Deleting… while pending", async () => { + let resolve!: () => void; + const onConfirm = vi.fn( + () => + new Promise((r) => { + resolve = r; + }), + ); + renderApp(); + + await userEvent.click(screen.getByRole("button", { name: /delete/i })); + + const dialog = within(document.body); + const buttons = await dialog.findAllByRole("button", { name: /delete/i }); + await userEvent.click(buttons[buttons.length - 1]); + + const pending = await dialog.findByRole("button", { name: /deleting/i }); + expect(pending).toBeDisabled(); + expect(dialog.getByRole("button", { name: /cancel/i })).toBeDisabled(); + expect(onConfirm).toHaveBeenCalledTimes(1); + + resolve(); + await waitFor(() => expect(dialog.queryByText("Delete this term?")).toBeNull()); +}); + test("a clean confirm closes the dialog", async () => { const onConfirm = vi.fn(() => Promise.resolve()); renderApp(); diff --git a/web/src/components/delete-confirm-dialog.tsx b/web/src/components/delete-confirm-dialog.tsx index 5792b1f..be1a3fc 100644 --- a/web/src/components/delete-confirm-dialog.tsx +++ b/web/src/components/delete-confirm-dialog.tsx @@ -28,10 +28,12 @@ export function DeleteConfirmDialog({ }) { const { t } = useTranslation(); const [open, setOpen] = useState(false); + const [pending, setPending] = useState(false); const [message, setMessage] = useState(null); const confirm = async () => { setMessage(null); + setPending(true); try { await onConfirm(); } catch (err) { @@ -40,6 +42,8 @@ export function DeleteConfirmDialog({ const { key, opts } = errorMessageKey(err); setMessage(t(key, opts)); return; + } finally { + setPending(false); } setOpen(false); }; @@ -62,8 +66,10 @@ export function DeleteConfirmDialog({

)} - {t("form.cancel")} - {t("actions.delete")} + {t("form.cancel")} + + {pending ? t("actions.deleting") : t("actions.delete")} + diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json index f4f2b59..c50bbbb 100644 --- a/web/src/i18n/en.json +++ b/web/src/i18n/en.json @@ -1,12 +1,12 @@ { "common": { "yes": "Yes", "no": "No", "close": "Close", "loading": "Loading", "filter": "Filter…", "noMatches": "No matches", "language": "Language", "skipToContent": "Skip to content", "clear": "Clear", "open": "Open" }, "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar", "breadcrumb": "Breadcrumb" }, - "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server", "sessionExpired": "Your session expired — please sign in again.", "signingOut": "Signing out…" }, + "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signingIn": "Signing in…", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server", "sessionExpired": "Your session expired — please sign in again.", "signingOut": "Signing out…" }, "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" }, "unknownRef": "(unknown)", "detailTitle": "Object detail", "tableLabel": "Objects" }, "fieldsLabels": { "objectNumber": "Object number", "objectName": "Name", "count": "Number of objects", "briefDescription": "Brief description", "currentLocation": "Current location", "currentOwner": "Current owner", "recorder": "Recorder", "recordingDate": "Recording date", "visibility": "Visibility" }, "visibility": { "draft": "Draft", "internal": "Internal", "public": "Public" }, "form": { "selectPlaceholder": "— select —", "create": "Create object", "save": "Save", "cancel": "Cancel", "visibility": "Visibility", "draft": "Draft", "internal": "Internal", "required": "This field is required", "rejected": "The server rejected the changes — check required and referenced fields", "fieldRejected": "The field \"{{field}}\" was rejected — check its value", "createdButFieldRejected": "Object created, but a field was rejected — fix it below.", "flexibleHeading": "Catalogue fields", "saving": "Saving…", "createAnother": "Save & create another", "minCount": "Must be at least 1", "fieldError": { "type_mismatch": "Wrong type for this field", "unresolved": "Referenced value not found", "unknown": "Unknown field" }, "unsaved": { "title": "Discard unsaved changes?", "body": "You have unsaved changes that will be lost.", "stay": "Keep editing", "leave": "Discard" } }, - "actions": { "edit": "Edit", "delete": "Delete", "rename": "Rename", "save": "Save", "closeDetail": "Close detail", "confirmDelete": "Delete this object? This cannot be undone.", "confirmDeleteTerm": "Delete this term? This cannot be undone.", "confirmDeleteAuthority": "Delete this authority? This cannot be undone.", "confirmDeleteField": "Delete this field definition? This cannot be undone.", "confirmDeleteVocabulary": "Delete this vocabulary? This cannot be undone.", "inUse": "Can't delete — used by {{count}} object(s). Clear those fields first." }, + "actions": { "deleting": "Deleting…", "edit": "Edit", "delete": "Delete", "rename": "Rename", "save": "Save", "closeDetail": "Close detail", "confirmDelete": "Delete this object? This cannot be undone.", "confirmDeleteTerm": "Delete this term? This cannot be undone.", "confirmDeleteAuthority": "Delete this authority? This cannot be undone.", "confirmDeleteField": "Delete this field definition? This cannot be undone.", "confirmDeleteVocabulary": "Delete this vocabulary? This cannot be undone.", "inUse": "Can't delete — used by {{count}} object(s). Clear those fields first." }, "labels": { "label": "Label", "externalUri": "External URI (optional)", "otherLanguages": "This entry also has labels in other languages, which are kept.", "uriPlaceholder": "https://…" }, "theme": { "light": "Light", "dark": "Dark", "system": "System" }, "vocab": { diff --git a/web/src/i18n/sv.json b/web/src/i18n/sv.json index 098deb7..f5f71ab 100644 --- a/web/src/i18n/sv.json +++ b/web/src/i18n/sv.json @@ -1,12 +1,12 @@ { "common": { "yes": "Ja", "no": "Nej", "close": "Stäng", "loading": "Laddar", "filter": "Filtrera…", "noMatches": "Inga träffar", "language": "Språk", "skipToContent": "Hoppa till innehåll", "clear": "Rensa", "open": "Öppna" }, "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "collapseSidebar": "Fäll ihop sidofältet", "expandSidebar": "Fäll ut sidofältet", "breadcrumb": "Brödsmulor" }, - "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern", "sessionExpired": "Din session har gått ut — logga in igen.", "signingOut": "Loggar ut…" }, + "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signingIn": "Loggar in…", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern", "sessionExpired": "Din session har gått ut — logga in igen.", "signingOut": "Loggar ut…" }, "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" }, "unknownRef": "(okänd)", "detailTitle": "Objektdetalj", "tableLabel": "Objekt" }, "fieldsLabels": { "objectNumber": "Föremålsnummer", "objectName": "Namn", "count": "Antal föremål", "briefDescription": "Kort beskrivning", "currentLocation": "Nuvarande plats", "currentOwner": "Nuvarande ägare", "recorder": "Registrerad av", "recordingDate": "Registreringsdatum", "visibility": "Synlighet" }, "visibility": { "draft": "Utkast", "internal": "Intern", "public": "Publik" }, "form": { "selectPlaceholder": "— välj —", "create": "Skapa föremål", "save": "Spara", "cancel": "Avbryt", "visibility": "Synlighet", "draft": "Utkast", "internal": "Intern", "required": "Fältet är obligatoriskt", "rejected": "Servern avvisade ändringarna — kontrollera obligatoriska och refererade fält", "fieldRejected": "Fältet \"{{field}}\" avvisades — kontrollera värdet", "createdButFieldRejected": "Föremålet skapades, men ett fält avvisades — åtgärda nedan.", "flexibleHeading": "Katalogfält", "saving": "Sparar…", "createAnother": "Spara & skapa ny", "minCount": "Måste vara minst 1", "fieldError": { "type_mismatch": "Fel typ för detta fält", "unresolved": "Refererat värde hittades inte", "unknown": "Okänt fält" }, "unsaved": { "title": "Kasta osparade ändringar?", "body": "Du har osparade ändringar som går förlorade.", "stay": "Fortsätt redigera", "leave": "Kasta" } }, - "actions": { "edit": "Redigera", "delete": "Ta bort", "rename": "Byt namn", "save": "Spara", "closeDetail": "Stäng detalj", "confirmDelete": "Ta bort detta föremål? Detta kan inte ångras.", "confirmDeleteTerm": "Ta bort denna term? Detta kan inte ångras.", "confirmDeleteAuthority": "Ta bort denna auktoritet? Detta kan inte ångras.", "confirmDeleteField": "Ta bort denna fältdefinition? Detta kan inte ångras.", "confirmDeleteVocabulary": "Ta bort denna vokabulär? Detta kan inte ångras.", "inUse": "Kan inte ta bort — används av {{count}} föremål. Rensa de fälten först." }, + "actions": { "deleting": "Tar bort…", "edit": "Redigera", "delete": "Ta bort", "rename": "Byt namn", "save": "Spara", "closeDetail": "Stäng detalj", "confirmDelete": "Ta bort detta föremål? Detta kan inte ångras.", "confirmDeleteTerm": "Ta bort denna term? Detta kan inte ångras.", "confirmDeleteAuthority": "Ta bort denna auktoritet? Detta kan inte ångras.", "confirmDeleteField": "Ta bort denna fältdefinition? Detta kan inte ångras.", "confirmDeleteVocabulary": "Ta bort denna vokabulär? Detta kan inte ångras.", "inUse": "Kan inte ta bort — används av {{count}} föremål. Rensa de fälten först." }, "labels": { "label": "Etikett", "externalUri": "Extern URI (valfritt)", "otherLanguages": "Denna post har även etiketter på andra språk, som behålls.", "uriPlaceholder": "https://…" }, "theme": { "light": "Ljust", "dark": "Mörkt", "system": "System" }, "vocab": { diff --git a/web/src/objects/delete-object-dialog.test.tsx b/web/src/objects/delete-object-dialog.test.tsx index 75f3645..63c36fc 100644 --- a/web/src/objects/delete-object-dialog.test.tsx +++ b/web/src/objects/delete-object-dialog.test.tsx @@ -41,6 +41,35 @@ test("confirm delete: DELETE then navigate to the list", async () => { expect(deleted).toBe(true); }); +test("confirm is disabled and labelled Deleting… while the DELETE is in flight", async () => { + let release!: () => void; + const gate = new Promise((r) => { + release = r; + }); + + server.use( + http.delete("/api/admin/objects/:id", async () => { + await gate; + return new HttpResponse(null, { status: 204 }); + }), + ); + + renderApp(tree(), { route: "/objects/o-1" }); + + await userEvent.click(await screen.findByRole("button", { name: /delete/i })); + + const dialog = await screen.findByRole("alertdialog"); + + await userEvent.click(within(dialog).getByRole("button", { name: /delete/i })); + + const pending = await within(dialog).findByRole("button", { name: /deleting/i }); + expect(pending).toBeDisabled(); + expect(within(dialog).getByRole("button", { name: /cancel/i })).toBeDisabled(); + + release(); + await waitFor(() => expect(screen.getByText("objects list")).toBeInTheDocument()); +}); + test("cancel does not delete", async () => { let deleted = false; diff --git a/web/src/objects/delete-object-dialog.tsx b/web/src/objects/delete-object-dialog.tsx index fb7f954..d505776 100644 --- a/web/src/objects/delete-object-dialog.tsx +++ b/web/src/objects/delete-object-dialog.tsx @@ -54,9 +54,9 @@ export function DeleteObjectDialog({ id }: { id: string }) {

)} - {t("form.cancel")} - - {t("actions.delete")} + {t("form.cancel")} + + {del.isPending ? t("actions.deleting") : t("actions.delete")}